HTML – External CSS Stylesheet

Posted on November 21, 2016 by Administrator Posted in Computer Science, HTML, CSS & JavaScript

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.