CodingBison - Introduction: External Style Sheets

The common way to add CSS rules to an HTML page is to use an external style-sheet and then include it within the HTML page. For that, we can use either the <link> attribute or the @import directive.

Things To Remember

It is okay to use <style> tag when we are adding style to a single page. However, when dealing with multiple pages, we should use external style sheets.

While it is acceptable to use the <style> element to add simpler design to a (relatively simpler!) page, the recommended approach is to either use the <link> method to add an external CSS file or use the @import directive.

The advantage of using external CSS file is that we can embed the same file in multiple HTML pages instead of having to provide the same design rules in multiple pages; clearly, this is good for code-reusability. In addition, keeping the design file separate also makes HTML code less cluttered and thus, improves code-readability. As an HTML author, we should always keep both code-reusability and code-readability in mind.

To better understand adding an external style sheet, let us now see two examples. The first one uses the <link> tag to add CSS file. The second one uses the @import directive to add CSS file.

Example: <link> Tag

Our first example uses <link> tag to include an external CSS file. The HTML for this example consists of a simple paragraph element. For style, it includes an external CSS file ("t-rex.css"). Like the <a> element, the <link> element contains the href attribute that points to the location of the CSS file. The "rel" attribute specifies that the relationship between the current document (the HTML page) and the CSS file. The value of the "rel" attribute says that we would be using the linked CSS file as a stylesheet.

 <!doctype html>
 <html>
 <head>
     <title> Learning CSS: Getting Started </title>
     <link type="text/css" rel="stylesheet" href="t-rex.css">
 </head>

 <body>
 <p> 
 Tyrannosaurus were a category of carnivorous dinosaurs that lived during the late 
 Cretaceous period. They were bipedal reptiles with a massive skull, which was 
 balanced by a long and heavy tail. Among them, the mightiest and the deadliest 
 were the Tyrannosaurus rex (or T. rex for short). These giants could grow up to 
 40 feet in length, up to 20 feet in height, and weigh up to 7 tons. 
 </p>
 </body>
 </html>

Next, we look at the "t-rex.css" CSS file. This file (provided below) adds two CSS designs (font and color) to the <p> (the paragraph) elements.

 /* This file adds style to an HTML page.  */

 p { 
     font-family: Helvetica, Verdana, sans-serif;
     color: blue;
 }

When we load the above HTML file, we would see that the text in the paragraph has a blue color and a font with one of either "Helvetica" or "Verdana". And if they are unavailable on the local browser, then the fall-back option would be "sans-serif".

Figure: Adding External CSS file with <link> tag

It is worth mentioning that the type attribute (that has a value of "text/css") in the above example is needed for HTML 4 only! With HTML5, the "text/css" is the default value and so we do not have to add this attribute if we are using <link> element to refer to a CSS file. Even simpler!

Example: @import Directive

Very similar to the <link> tag, we can also take the help of the @import statement to include an external CSS file. When adding a CSS file, we need to use the "url" keyword to specify the path of the file. The url path can be either relative or absolute. Please note that we do not include the file name within quotes. However, if you are used to adding file names within quotes, then you can do that. CSS would not complain!

Here is a rewrite of the earlier HTML page. Instead of the <link> tag, we now add the @import directive under the <style> tag. Note that with <link> tag, we do not use the <style> tag at all. The example uses the "t-rex.css" file from the earlier example.

 <!doctype html>
 <html>
 <head>
     <title> Learning CSS: Getting Started </title>
     <style>
     @import url(./t-rex.css);
     </style>
 </head>

 <body>
 <p> 
 Tyrannosaurus were a category of carnivorous dinosaurs that lived during the late 
 Cretaceous period. They were bipedal reptiles with a massive skull, which was 
 balanced by a long and heavy tail. Among them, the mightiest and the deadliest 
 were the Tyrannosaurus rex (or T. rex for short). These giants could grow up to 
 40 feet in length, up to 20 feet in height, and weigh up to 7 tons. 
 </p>
 </body>
 </html>

The output for this would be same as before and hence we omit it.