Adding Style sheets to your documents

Nana Gilbert-Baffoe

Printer Friendly Version

You may add style sheets to your pages by three main ways.

You may link an external style sheet to your document using the LINK element,
A style sheet can also be embedded using the STYLE element.
Each element in the documents can also have Inline Styles applied to them by setting the style attribute of the element.

Let's look at these three methods, starting from a global aspect then narrowing down to a local aspect.

The LINK element

How many time have you created a site for a client or your company, and then have to go back to change the color of the text or make a certain word bold? If your site consists of only a few pages, you may not minds doing this. However, when your site starts getting close to the 1000 or million page range, you have a problem on your hands. That's where style sheets come in handy. This is especially true for external style sheets that are then linked to your pages.

A linked style sheet uses an external file where all your style declarations are defined. When the style sheet is linked to a web page, all the rules defined in your external file are applied to your pages. This, as you can see, is obviously a great time saver since all you have to do is define a single style template and your whole site can use that template to format pages. Let's look at how to link to an external style temple to a page.

Stylesheet.css

<!-Style Definitions here//-->

Htmlfile.html

<html>
<head>
	<title>Demo Site></title>
	<link rel="STYLESHEET" type="text/css" href="stylesheet.css">
</head>
<body>

<!-- Web page contents here -->

</body>
</html>

With this method, the styles are read in from the external file named, stylesheet.css. This is done with the LINK element shown below:

The rel attribute specifies the type of link this is, in this case it's a style sheet. The type attribute indicates what kind of style sheet we are using, and the href attribute specifies where the style sheet is located.

The STYLE element

The STYLE element is another mechanism by which you can embed style rules into your documents. Unlike the LINK element, using STLYE will only have effects in a single document. The rules declared in this tag are then applied to the elements and text in the documents as indicated by the rules. Let's look at a template for the use of the STYLE element.

<html>

	 <head>
	<title>Demo Site</title>
<style type="text/css">
<!-
Style rules defined here
-->
</style>
</head>
<body>

<!-- Web page contents here -->

</body>
</html>

This template demonstrates the basic layout of a document that uses the STYLE element to embed style rules into a document. The STYLE element goes into the HEAD section of the HTML document. When the document is loaded, the rules are read from this portion of the document and then applied to the elements that have tagged to be formatted by the rule declared in the STYLE element.

The advantage of using the STYLE element over the inline CSS is that you do not have to keep declaring rules for every element that you plan to format. Suppose you had 30 different P elements in your document, and you need all of them to have the same formatting. With inline styles, you'd have to type in the different formatting that you wanted 30 different times

The rules defined in an embedded style sheet, have a greater precedence over rules defined in a linked style sheet. Therefore, for example if the P element has a style defined in a linked style sheet and there is another rule defined in an embedded style sheet, the rule in the embedded style sheet will have greater precedence over the inline style and will be the on that's displayed. They are exceptions to this rule, which we'll cover later on in the chapter.

Inline Styles

The next and final way you add styles to your documents s by using inline styles. With this method, the styles are defined right in the element it affects via the style attribute. Take look at the following snippet.

<html>
<head>
	<title>Demo Site</title>
</head>
<body>

<div style="style rules go here"></div>

</body>
</html>

The style defined in this DIV element will only apply to that particular DIV element. Any conflicting rules defined in linked or embedded style sheets will be overridden.

Now that you know the basic of how to embed styles into your documents, let me show you how to actually create style rules that then be used in your documents.

You've read the word "rule" many times now, and you may probably be thinking to yourself "What's this rule stuff he keeps talking about". Well take a look at the following rule; it contains many different sub-components.

P {font-weight:bold;}

A rule is composed of a selector, followed by one or more declaration enclosed in curly braces. The declaration is broken up into the attribute and the value. Each attribute is separated from its value by a colon and each declaration is separated from the other declaration by a semi-colon. Now in the previous rule, the P is the selector. This means that what ever is defined in the declaration will be applied to all P elements in the document. This rule only has one declaration. The attribute name is font-weight, and this controls whether the font will be displayed in bold or normal weight. The value for this attribute has been set to "bold", this means that the text enclosed by any P element will be rendered in bold type. The semi-colon that follows this declaration signals the end of the declaration and the closing brace marks the end of the rule.

Onto Page III

Back Page I

About the Author

Nana Gilbert-Baffoe is founder of the S2SNetwork. The Student-to-Student Trading Network

Printer Friendly Version