CSS: External Styling

Although learning about external style sheets is not on the agenda right now, it's good to understand what it actually does. External style sheets are suitable for a website with many pages. The look of the entire web site can be changed just by modifying one CSS file!

Style details are saved to an external CSS file, and then linked to, from the <head> section of the HTML page.

The HTML document: CSS file called styles.css:
<!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" href="styles.css">
    </head>
    <body>
      <h1>This is a heading</h1>
      <p>This is a paragraph</p>
      <p>This is another paragraph</p>
    </body>
  </html> 
body {
   background-color: lightblue;
}

h1 {
   color: navy;
   margin-left: 20px;
}

p {
   color: red;
   margin-left: 45px;
   font-size: 22px;
}

All styling specifications are saved to a .css file. Details in the CSS file can be changed anytime. A website can be "seasonal," with different color themes in four different CSS files: spring.css, summer.css, autumn.css and winter.css. Just tell the HTML document which CSS file to use! How awesome is that?

Back buttonTable of ContentsNext button