Types of CSS with examples

Types of CSS (Cascading Style Sheet)

A cascading style sheet is used to set the style in web pages that contain HTML elements. It sets the background color, font-size, color, etc property of elements on a web page. There are three types of CSS which are given below:

Inline CSS
Internal or Embedded CSS
External CSS

Inline CSS: Inline CSS contains the CSS property in the body section attached with element is known as inline CSS. This kind of style is specified within an HTML tag using the style attribute.

Example

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Inline CSS</title> 
    </head> 
      
    <body> 
        <p style = "color:#009900; font-size:50px; 
                font-style:italic; text-align:center;"> 
            BICTkoseli 
        </p> 
    </body> 
</html>          

Output:

BICT koseli

Internal or Embedded CSS: This can be used when a single HTML document must be styled uniquely. The CSS ruleset should be within the HTML file in the head section i.e the CSS is embedded within the HTML file.

Example

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Internal CSS</title> 
        <style> 
            .main { 
                text-align:center;  
            } 
            .BICT { 
                color:#009900; 
                font-size:50px; 
                font-weight:bold; 
            } 
            .koseli { 
                font-style:bold; 
                font-size:20px; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "main"> 
            <div class ="BICT">BICTkoseli</div> 
              
            <div class ="koseli"> 
                A complete notes portal for ICTians. 
            </div> 
        </div> 
    </body> 
</html>               

Output:

BICTkoseli

A complete notes protal koseli for ICTians.

External CSS: External CSS contains separate CSS files that contain only style property with the help of tag attributes (For example class, id, heading, … etc). CSS property is written in a separate file with .css extension and should be linked to the HTML document using the link tag. This means that for each element, style can be set only once and that will be applied across web pages.

Example

HTML File

<!DOCTYPE html> 
<html> 
    <head> 
        <link rel="stylesheet" href="geeks.css"/> 
    </head> 
  
    <body> 
        <div class = "main"> 
            <div class ="BICT">BICTkoseli</div> 
            <div id ="geeks"> 
                A complete notes portal for ICTians.
            </div> 
        </div> 
    </body> 
</html> 

Below is the CSS file that is going to be linked with the above HTML file externally.

The link tag is used to lin the external style sheet with the HTML webpage. href attribute is used to specify the location of an external style sheet file.

CSS File

body {
    background-color:powderblue;
}
.main {
    text-align:center;   
}
.BICT {
    color:#009900;
    font-size:50px;
    font-weight:bold;
}
#koseli {
    font-style:bold;
    font-size:20px;
}

Output:

BICTkoseli

A complete notes portal koseli for ICTians.

Views