UI Tutorial
UI Tutorial

HTML with CSS

HTML

HTML stands for Hyper text markup Language. HTMl is a text formating language which is used to crate and display pages on the web.

CSS

Cascading Style Sheets is a style sheet language used for formatting of HTML pages.

Cascading Style Sheets (CSS) is control the layout of a webpage. you can use CSS to alter the color, font, font-size, border, design, layout, animation, background-image, background-color, space, and split to the multiple columns, etc...

CSS style sheets to describe the presentation
We used CSS to design the website. It always helps to look better for our website.

How to add CSS to HTML

CSS can be added to HTML in 3 ways.

  1. Inline Style
  2. Internal Style
  3. External Style

Inline CSS

Added inline styles directly to HTML elements.
Use the style attribute in the tags. more detail about HTML inline Style

Internal CSS

Internal CSS in a <style> tag element in the <head> section.
By placing the code in style element within the HEAD element.

External CSS

CSS can be added to HTML by linking by using an <link> element to a separate stylesheet file or external CSS file.
Place the CSS in an external file and link it via a link Tag element.

HTML with CSS code

HTML With CSS templates Example:


<!DOCTYPE html>
<html>
<head>
<title>HTML with CSS code</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="demo.css">
<style type="text/css">
p {
background-color: green;
color:white;
font-size: 40px;
text-align: center;
padding: 20px;
border:10px solid yellow;
width: 300px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%
}  
div {
background-color: gray;
color:white;
padding: 20px;
width: 300px;
height: 200px;
border:10px solid blue;
}  
</style>
</head>
<body>
<h1 style="background: red;color: white;">Inline Style
</h1>
<p>Internal stylesheets
</p>
<div>Embedding CSS in a style tag element in the head section.
      <br>
By placing the code in style element within the HEAD element.
</div>
</body>
</html>

                              

Output here.

How to Use an External Style Sheet

The place CSS <link> tags inside the <head> tag at the top of your HTML page.

The rel attribute

The rel attribute is set to the stylesheet to tell the browser that linking file CSS.

The type attribute

The Type attribute and value text/css is not necessary in HTML5, because HTML5 supports CSS.

Using HTML5 then type attribute is not required.

Two popular names for the style sheet base.css and global.css name your external style sheets

The place CSS <link> tags inside the <head> tag at the top of your HTML page. This way the CSS will be loaded first and will apply to your page as it is loading, rather than showing unstyled HTML until the CSS is loaded.

The href attribute

The href attribute is where you specify the path to your external CSS file.

less used an @import statement inside direct CSS.


<style>   
 @import("pathname/style.css")
</style> 

     


<style type="text/css">  
  @import("pathname/style.css") 
</style>


       

Absolute URLs path like this.

Syntax


<link href="https://www.yourdomain.com/style.css" rel="stylesheet" type="text/css">

                              

Relative path like this.

Syntax



<link href="foldername/style.css" rel="stylesheet" type="text/css">


  

Advantages External style sheets

when you changes to your CSS are reflected across all pages you only need to make a CSS change once in your single CSS file and all reference pages automatically updated.

Increases Site speed Using External CSS User first visits your website their browser download linked css file and html current page. When they navigate to another page, their browser only download the HTML new page, alrady css file cached the CSS file so doesn't need to be downloaded again.

Internal Stylesheet

An internal CSS is using <style>tag to defined a style for a single HTML web page.

create an embedded style means (Internal style) sheet Used <style>tag in the head section of your HTML page. Used </style> tag to closeing the embed style sheet.

Internal Stylesheet Example


<!DOCTYPE html>
<html>
<head>
<title>Internal stylesheets</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
h1 {
background-color: black;
color:white;
padding: 20px;
border:10px solid yellow;
width: 300px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}  
div {
background-color: blue;
color:white;
padding: 20px;
width: 300px;
height: 200px;
border:10px solid orange;
}  
</style>
</head>
<body>
<h1>Internal stylesheets
</h1>
<div>Embedding CSS in a style tag element in the head section.
      <br>
      By placing the code in style element within the HEAD element.
</div>
</body>
</html>

                              

Output here.

View The CSS Importance

HTML website without CSS would look like this.

Without CSS

Example -


<!DOCTYPE html>
<html>
<head>
<title> without stylesheets</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<h1>No CSS USED 
</h1>
</header>
<p>
HTML website without CSS would look like this.
</p>
</body>
</html>

                              

Output here.

Using CSS a lot of visual effects.

Example


<!DOCTYPE html>
<html>
<head>
<title>Using CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
      background-color: gray;
}  
h1{
      font-size: 50px;
      font-weight: bold;
      text-transform: uppercase;
}
div{
background-color: white;
color:black;
padding: 20px;
width: 300px;
height: 200px;
border:10px solid orange;
font-size: 40px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<header>
<h1>Using css
</h1>
</header>
<div>
      HTML website using CSS would look like this.
</div>
</body>
</html>

                              

Output here.

#Tips

The CSS link at the top of the page the CSS will be loaded first.

#Tips

When you change to an external style sheet CSS, all the reference pages automatically updated The awesome power of an external style sheet CSS.

Related Post

How to add Image in HTML

folder  HTML

The HTML <IMG> tag is used to display an image on the web page.

Read article   

What is an HTML Inline style?

folder  HTML

An inline style is used to apply a unique style to a single HTML element. HTML Inline Style CSS is inside of an HTML tag, using the style attribute, it’s called an “inline-style”.

Read article   

What is an HTML boilerplate

folder  HTML

>Popular HTML boilerplates are similar to basic empty templates. The HTML5 Boilerplate base to start your web page.

Read article