HTML with CSS

CSS (Cascading Stylesheet) is used to apply the style on the web page which is made up of HTML elements. It creates the look of the webpage.

CSS provides different style properties such as background color, padding, margin, border-color, etc, to style a webpage.

Example:

<body style="text-align: center;">
   <h2 style="color: red;">Welcome to i2 tutorials</h2>
   <p style="color: blue; font-size: 25px; font-style: italic;">This is a great website to learn technologies</p>
</body>

OUTPUT:

HTML with CSS

Three different ways to apply CSS:

Inline CSS
Internal or Embedded CSS
External CSS

Inline CSS:

Inline-styles are used to apply CSS in a single element. It can apply style uniquely in each element.

To apply inline CSS, you need to use style attributes within the HTML element. We can use as many properties as we want, but each property should be separated by a semicolon (;).

Example:

<body>
   <h3 style="color: red;
     font-style: italic;
     text-align: center;
     font-size: 50px;
     padding-top: 25px;">Learning HTML using Inline Styles</h3>
</body>

OUTPUT:

HTML with CSS

Internal CSS:

An Internal or Embedded stylesheets contains the CSS properties for a webpage in <head> section of HTML document. To use Internal styles (CSS), we can use class and id attributes.

Example:

<!DOCTYPE html> 
<html> 
<head> 
        <style> 
   /*Internal CSS using element name*/ 
      body{background-color:lavender; 
       text-align: center;} 
       h2{font-style: italic; 
        font-size: 30px; 
        color: #f08080;} 
       p{font-size: 20px;} 
   /*Internal CSS using class name*/ 
     .blue{color: blue;} 
     .red{color: red;} 
     .green{color: green;} 
   </style> 
  </head> 
 <body> 
 <h2>Learning HTML with internal CSS</h2> 
  <p class="blue">This is a blue color paragraph</p> 
  <p class="red">This is a red color paragraph</p> 
  <p class="green">This is a green color paragraph</p> 
 </body> 
</html>

OUTPUT:

HTML with CSS

External CSS:

An external style sheet holds all the style rules in a separate document (file) that you can link from any HTML document on your site.

There are two files that need to create to apply external CSS

Create a CSS document (file) and save it using the .css extension.
Link the CSS file in your HTML file using the tag in the header section of the HTML document.

Example:

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" type="text/css" href="https://static.javatpoint.com/htmlpages/css/style.css">
  </head>
 <body>
 <h2>Learning HTML with External CSS</h2>
  <p class="blue">This is a blue color paragraph</p>
  <p class="red">This is a red color paragraph</p>
  <p class="green">This is a green color paragraph</p>
 </body>
</html>

CSS file:

body{
background-color:lavender;
text-align: center;
}
h2{
font-style: italic;
size: 30px;
color: #f08080;
}
p{
font-size: 20px;
}
.blue{
color: blue;
}
.red{
color: red;
}
.green{
color: green;
}

OUTPUT:

HTML with CSS