Lesson 4: External Style Sheet

❮ Previous Lesson Next Lesson ❯

When we wish to create a website with a uniform look, we can apply uniform formatting for all its web pages using an external style sheet. The procedure is to create a stand-alone CSS file and then link all the web pages to this file. In this way, we do not need to create a style for every webpage. If you need to make any changes in style for all the web pages, you just need to edit the external CSS file instead of editing all the web pages, thus saving a great deal of time.

To create a stand-alone CSS file, you can use any text editor such as notepad ++. For example, you can create a style sheet such as this in notepad ++:

p  { font-size: 14 pt; color: red}
li { color: blue}
ul{ text-decoration: green}

Click save as and select All file types and save the document as style.css. (*A CSS file must end with extension css.)

Next, you can create an HTML document to link to the above CSS file. To link to the external CSS file, we use the link element together with the attributes href, type and rel. The attribute href is to specify the path of the CSS file, the type attribute is to specify the type of document it is linking to and rel is to specify the relationship between the CSS file and an HTML document. An HTML document can link to more than one external CSS files.

Example 4.1

<html>
<head>
<link rel="stylesheet", type="text/css" href="style.css">
</head>
<body>
<p> I have written and published a few books for the past two years, the books are listed below</p>
<ul>
<li>Visual Basic 6 Made Easy</li>
<li>Excel VBA Made Easy</li>
<li>Visual Basic 2008 Made Easy</li>
<li>Online Business Made Easy</li>
</ul>
</body>
</html>

Save this document as exstyle.htm.

The Output

I have written and published a few books for the past two years, the books are listed below

Visual Basic 6 Made Easy
Excel VBA Made Easy
Visual Basic 2008 Made Easy
Online Business Made Easy

❮ Previous Lesson Next Lesson ❯