Types of css

Inline CSS:

Inline CSS contains the CSS property in the body section attached with element is known as inline CSS.

Inline styles are defined within the “style” attribute of the relevant element:

An inline style may be used to apply a unique style for a single element.

NOTE: An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly/restricted manner.

Example is given below

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.

An internal style sheet may be used if one single HTML page has a unique style.

Internal styles are defined within the style and inside the head section of the html page

Example is given below

External CSS

External CSS contains separate CSS file which contains only style property with the help of tag attributes (For example class, id, heading, … etc). CSS property written in a separate file with .css extension and should be linked to the HTML document using link tag.

This means that for each element, style can be set only once and that will be applied across web pages.

Each HTML page must include a reference to the external style sheet file inside the element, inside the head section

An external style sheet can be written in any text editor, and must be saved with a .css extension.

The external .css file should not contain any HTML tags.

Example is given below