Advanced Modules
26.2
Lesson

External Stylesheet

External stylesheet is a separate .css file that contains all the CSS. This file can be linked to any HTML web page, and hence a single file can be used to style multiple web pages or an entire website.

The link element within the head section of the HTML document is used to link the external stylesheet as shown below:

<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
  </body>
</html>

In the above example, the styles.css file has to contain CSS code as shown below:

h1 {
  color: blue;
  font-size: 3rem;
}

#my-para {
  font-size: 1.2rem;
}