3 types of Cascading Style Sheets (CSS)

Cascading Style Sheet(CSS) is used to set the style in web pages that contain HTML elements. It sets the background color, font size, font family, color, … etc properties 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 an element known as inline CSS. This kind of style is specified within an HTML tag using the style attribute. 

Example:

Output:

Internal or Embedded CSS

 This can be used when a single HTML document must be styled uniquely. The CSS rule set should be within the HTML file in the head section i.e the CSS is embedded within the HTML file. 

Example:  

Output:

External CSS

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

Example: The file given below contains CSS property. This file is saved with the .css extension. For Ex: style.css

  

Below is the HTML file that is making use of the created external style sheet  

  • link tag is used to link the external style sheet with the Html webpage.
  • href attribute is used to specify the location of the external style sheet file.

Output:

Reference:

Types of CSS (cascading style sheet). GeeksforGeeks. (2022, June 30). Retrieved September 1, 2022, from https://www.geeksforgeeks.org/types-of-css-cascading-style-sheet/#:~:text=There%20are%20three%20types%20of%20CSS%20which%20are,2%20Internal%20or%20Embedded%20CSS%203%20External%20CSS

Leave a Comment

Your email address will not be published. Required fields are marked *