Elegant HTML Formats Using Stylesheets
Overview of stylesheets and how it is integrated to html
Cascading Style Sheets that contain all format related information of associated HTML files have become a WWW standard. A style sheet, rather than the body tag itself, would contain format details of not just the body tag but all tags within the document. The style sheet may either be part of the html header or a separate document; if it stored separately, it should be saved with the extension ".css" and a reference to it should be included in the HTML header. Styles may even be defined within a tag. In case more than one style definition has been specified for a single tag, all the definitions will condense or cascade into a single definition based on an order of precedence. This is why Style Sheets are said to be Cascading. Basically, any style that is defined within a tag takes precedence over any other style definition. Style definitions embedded in the header have precedence over definitions in an external embedded file.
The advantages of using CSS are dual. First, the HTML document is better designed and looks a lot cleaner without all the format related information and second, it becomes a lot easier to change the format of a document. For example, if the font of all the paragraphs of all documents in a web site are to be altered, it is a lot easier to just change the generic paragraph format in a stylesheet than to manually edit each paragraph tag within every page.
When we looked at body tag attributes, we saw that specifying text and back ground color within the body tag has been deprecated. It is now recommended that we use a style sheet to specify these formatting details. Lets format the body tag using a style sheet.
body {
background-image: url("flowerback.gif");
font-family: Tahoma, Arial;
font-weight: bold;
font-size: 12pt;
color: purple
}
The above code specifies that the flowerback.gif image should be used as a background image for the body. It also says that the a twelve point, bold, purple Tahoma font should be used for our document by default. How do we hook this up to our HTML file? There are two ways of doing this. We could copy the above line into a blank text file and save it with an appropriate name like "style.css" in the same directory as our HTML file. Afterwards, we would reference this file in our HTMl header in the following way:
<head> <title>Flowers - Your Online Florist</title> <meta name="keywords" content="flowers, roses, dahlia, tulips, birthday, present"> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
Note that the <link> tag is an empty tag - it has no closing tag. This is why it contains a backslash before the greater than sign. An alternate way of including a style sheet is to simply embed the definitions in the header of the html file in the following way:
<head>
<title>Flowers - Your Online Florist</title>
<meta name="keywords" content="flowers, roses, dahlia, tulips, birthday,
present">
<style type="text\css">
body {
background-image: url("flowerback.gif");
font-family: Tahoma, Arial;
font-weight: bold;
font-size: 12pt;
color: purple
}
</style>
</head>
We will use the first method. Save the body style definition in a file called "style.css". Put a <link> tag in the florist html file and remove the background attribute from the body tag. The rest of the body remains the same. The start of your updated HTML file should look like this:
<head> <title>Flowers - Your Online Florist</title> <meta name="keywords" content="flowers, roses, dahlia, tulips, birthday, present"> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body>
A Style Sheet Definition has the following basic format
tagname {
format-attribute-1: value;
format-attribute-2: value;
format-attribute-3: value;
(..and so on..)
format-attribute-n: value
}
Note that the last attribute need not have a semicolon after its value. A tag name may be any HTML tag - paragraph, heading, horizontal rule, body or any other. Format attributes change depending upon the element being formatted. Attributes like font-family, font-weight, font-size, margin-top, margin-left, and color may be set for most tags. However, some attributes may not make sense for certain tags. For example, specifying a font for a horizontal ruler is not very useful. Let us set the paragraph, heading 1, link, and horizontal divider styles for our document.
p {
font-family: Arial;
font-size: 12pt;
margin-left: 20px;
margin-right: 20px;
text-align: justify;
font-weight: normal;
color: navy
}
h1
{
font-family: Arial, Verdana, Helvetica, 'sans serif';
font-size: 18pt;
margin-left: 20px;
color: navy;
}
a:link
{
color: blue
}
hr
{
color: navy
}
Add the above lines to your "style.css" file and save the file. Don't forget to remove all internal formats like the align attribute in the paragraph tags. Also remove the extra blank lines after the heading. Now, your HTML source should look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Flowers - Your Online Florist</title> <meta name="keywords" content="flowers, roses, dahlia, tulips, birthday, present"> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Online Florist - <a href="http://plantanswers.tamu.edu/flowers/flower.html">Flowers</a> For All Occasions</h1> <br> <hr> <p>Hello! Welcome to your friendly neighborhood florist on the Web. Take a look at our catalogue. You can choose from a variety of bouquets and gifts. We have flowers to match every budget! Our flowers are delivered fresh to your home and are payable COD.</p> <p>If you are a new customer, take a minute to enter your details and register with us so we know where to deliver your flowers. You can change your contact details if you are a repeat customer. I hope you have a great shopping experience with us. Do keep coming back! Also, please take a moment to give us your valuable suggestions and comments.</p> </body> </html>
The output should look like this:
ScreenShot 3a: The Florist HTML Page
We have come a long way! Note that the paragraphs are rendered in an Arial font of normal weight. This is because the paragraph element definition takes precedence over the body element definition when it comes to paragraph format. If we removed the paragraph element definition, all paragraphs will be rendered in a Tahoma font of bold weight.
Stylesheets also offer flexibility when we want to include elements of more than one format in our document. Let us say that we may want to use another type of paragraph - this one center aligned and with a red font. All we have to do is add the following definition to our CSS file:
p.center
{
font-family: Arial;
font-size: 12pt;
margin-left: 20px;
margin-right: 20px;
text-align: center;
font-weight: normal;
color: red
}
Now, we can format paragraphs in our document according to the above definition by using the 'class' attribute. Any number of extra styles may be defined in this way for just about any HTML tag. Correspondingly, the class attribute may be used for any tag.
<p class=center>My new center aligned, red paragraph</p>
The combination of the HTML tags and stylesheets allows us to do some pretty neat things. In the next chapter, we will add new pages to our online florist web site that include more complex HTML elements like tables and forms.
