External, Internal and Inline

CSS commands can be placed in different locations.

External Style Sheets

All the CSS commands are stored in a separate file – often saved as styles.css

Changing or setting any properties in this file will affect every page in the website that uses the same stylesheet file.

styles.css
1
2
3
4
p {
    font-size: 18px;
    color: darkgreen;
}
HTML File
01
02
03
04
05
06
07
08
09
10
<!DOCTYPE html>
<html>
    <head>
        <title>#####</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        ###########
    </body>
</html>

Internal Style Sheets

All the CSS commands are stored inside the <style> </style> tags in the <head> </head> section of the html page.

HTML File
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<!DOCTYPE html>
<html>
    <head>
        <title>#####</title>
        <style>
            p {
                font-size: 18px;
                color: darkred;
            }
        </style>
    </head>
    <body>
        ###########
    </body>
</html>

Internal style sheets are best used when:

  • a website only has one page
  • one page in a website has to look different from the other pages.

Inline Styles

CSS style commands are embedded inside the html tags:

HTML File
1
<p style="font-size: 18px; color: darkblue;">bla bla bla</p>

Inline styles should be avoided. They are difficult to read, and mix the page content with the formatting, making pages hard to update. Using a CSS id or class achieves the same result, but avoid the problems.