HTML – External CSS Stylesheet

Did you know?


You can use CSS code both within your HTML page or as a separate CSS file

Internal CSS Stylesheet


Internal CSS is saved wihtin the HTML page by adding a <STYLE> tag inside the <HEAD> section of the page.

The example below is an example of internal CSS stylesheet:

<HTML>
<HEAD>
    <STYLE>
         BODY { 
             background-color: #00FFFF;
         }
    </STYLE>
</HEAD>
<BODY>
   ....
</BODY>
</HTML>

The issue with internal CSS stylesheet is when a website consists of many HTNL pages. The CSS code needs to be added to every single page which can be really time consuming to maintain.

External CSS Style Sheet


To solve this issue, we can save the CSS code in a single file with the file extension .css (for instance: style.css)

We can then link all the pages of our website to this CSS stylesheet by adding the following code to our pages:

<HTML>
<HEAD>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</HEAD>
<BODY>
   ....
</BODY>
</HTML>

The main benefit of this approach is that we can now change the look & feel of all the webpages of our website by changing the content of just one single style.css file.
external-css-stylesheet

Video Tutorial


Did you like this challenge?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 2

No votes so far! Be the first to rate this post.

As you found this challenge interesting...

Follow us on social media!

Tagged with: ,