WAYS TO INSERT CSS

There are 3 ways to insert CSS style sheet in our HTML document.

1. - External style sheet

2. - Internal style sheet

3. - Style defined in the same element

CSS External style sheet

It is the most common way to define a style sheet.

Ideal when our CSS stylesheet will be used in multiple web pages HTML, because when we want to change the style of those HTML pages, just change the external file with the CSS style sheet, and automatically all our HTML web pages will be updated with the new definition, without touching them.

To define an external style sheet, create a new file with "css" where we define all necessary styles.

For example, the file "style.css" shall have the following styles:

body {margin-left:20px;} p {color:blue;}

In HTML web pages which use this style sheet, the sheet will include using the element <link>

For example, my website "page1.html" can be:

<html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p> paragraph with the text in blue</p> </body> </html>

CSS Internal style sheet

When each website has its own style HTML different then these styles are defined internally in each HTML page using the tag <style>

For example, our website "webpage.html" can be:

<html> <head> <style type="text/css"> body {margin-left:20px;} p {color:blue;} </style> </head> <body> <p> paragraph with the text in blue</p> </body> </html>

Style defined in the same element

You can define the CSS style in the same HTML element.

This is not recommended, because it breaks with the advantages of style sheets, separating content (HTML) from presentation (CSS).

Our html "webpage.htm" would look like:

<html> <body style="margin-left:20px"> <p style="color:blue"> paragraph with the text in blue</p> </body> </html>