How to Insert Stylesheets

When reading a stylesheet, the browser formats the HTML document according to it.

How to Insert Stylesheets

There are three ways to insert a stylesheet:

External Stylesheet: When styles need to be applied to many pages, an external stylesheet is the ideal choice. By changing one file, you can change the appearance of an entire site. Each page links to the stylesheet using the <link> tag in the head of the document, like this:
```
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
```
The browser reads the style declarations from the mystyle.css file and formats the document accordingly. External stylesheets can be edited in any text editor and should be saved with a .css extension.
Internal Stylesheet: When a single document needs special styles, an internal stylesheet should be used. You can define an internal stylesheet in the head of the document using the <style> tag, like this:
```
<head>
    <style>
        hr {color:sienna;}
        p {margin-left:20px;}
        body {background-image:url("images/back40.gif");}
    </style>
</head>
```
Inline Styles: Inline styles mix content and presentation, losing many advantages of stylesheets. Use this method sparingly, such as when a style needs to be applied only once to an element. To use inline styles, add the style attribute to the relevant tag. This example shows how to change the color and left margin of a paragraph:
```
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
```

External Stylesheet

When styles need to be applied to many pages, an external stylesheet is the ideal choice. By changing one file, you can change the appearance of an entire site. Each page links to the stylesheet using the <link> tag in the head of the document:

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

The browser reads the style declarations from the mystyle.css file and formats the document accordingly.

External stylesheets can be edited in any text editor. The file should not contain any HTML tags and should be saved with a .css extension. Here is an example of a stylesheet file:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

Note: Do not leave spaces between the property value and the unit (e.g., "margin-left: 20 px"), the correct way is "margin-left: 20px".

Internal Stylesheet

When a single document needs special styles, an internal stylesheet should be used. You can define an internal stylesheet in the head of the document using the <style> tag, like this:

<head>
    <style>
        hr {color:sienna;}
        p {margin-left:20px;}
        body {background-image:url("images/back40.gif");}
    </style>
</head>

Inline Styles

Inline styles mix content and presentation, losing many advantages of stylesheets. Use this method sparingly, such as when a style needs to be applied only once to an element. To use inline styles, add the style attribute to the relevant tag. This example shows how to change the color and left margin of a paragraph:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Multiple Styles

If the same selector defines certain properties in different stylesheets, the property values will be inherited from the more specific stylesheet. For example, an external stylesheet has three properties for the h3 selector:

h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}

And an internal stylesheet has two properties for the h3 selector:

h3
{
    text-align:right;
    font-size:20pt;
}

If a page with an internal stylesheet also links to the external stylesheet, the h3 will be styled as:

color:red;
text-align:right;
font-size:20pt;

The color property will be inherited from the external stylesheet, while the text alignment and font size will be overridden by the internal stylesheet rules.

Multiple Style Priority

Styles can be defined in multiple ways. Styles can be defined in a single HTML element, in the head element of an HTML page, or in an external CSS file. You can even reference multiple external stylesheets in the same HTML document. In general, the priority is as follows:

Inline style > Internal style sheet > External style sheet > Browser default style

Here is the style.css file with the following style code:

h3 {
    color:blue;
}

Example:

<head>
    <!-- External stylesheet style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!-- Sets: h3{color:blue;} -->
    <style type="text/css">
      <!-- Internal stylesheet -->
      h3{color:green;}
    </style>
</head>
<body>
    <h3>Displays green, due to internal stylesheet</h3>
</body>

Note: If the external stylesheet is placed after the internal stylesheet, the external stylesheet will override the internal stylesheet, as shown in the following example:

<head>
    <!-- Sets: h3{color:blue;} -->
    <style type="text/css">
      <!-- Internal stylesheet -->
      h3{color:green;}
    </style>
    <!-- External stylesheet style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
    <h3>Displays blue, due to external stylesheet</h3>
</body>