CSS: Types of CSS Styles

There are 3 types of CSS Styles which have been used in Web pages which are listed below:

1. Inline Styles
2. Embedded Styles
3. External Styles

Now I am going to explain each one of them one by one.
Inline Styles:
Inline styles make use of the style attribute applied to specific tags within the document,
where the actual style value is declared using the form name:value, or property:value, if you
want to use the correct terminology.

Example:
Replace this:

With:

.

This very simple declaration will ensure that the paragraph text will be red.

Embedded Styles:
Embedded styles still have you working exclusively within the (X)HTML template, but this time
all styles are grouped together in the head of the document, as part of one element.

Example:
Within the head section of the html page place below line:
.
This results in text contained within paragraphs on the web page to be red.

External Styles:
External Styles have been placed in a separate external style sheet and it contains are the styles which are required for the full site even if it contains thousands of pages.

Example:
Place below line within the head section of the web page:


Create an external.css style sheet file and place the below line inside it.
p {color: #F00;}

The result of this will be that all the web pages which contains link inside the head section written above paragraphs text becomes red.

If you want to read about the benefits of External Styles then follow the below link:
Benefits of External Styles