CSS Tutorial Lesson 4: External Style Sheet

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on RedditEmail this to someone

[Lesson 3]<<[Contents]>>[Lesson 5]

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.)

Now, 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

 

[Lesson 3]<<[Contents]>>[Lesson 5]

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on RedditEmail this to someone