Cascading style sheets, in-line styles and style blocks

by Neil Macmillan

Introduction

Styles allow web page writers to control page formatting in a manner similar to that used in advanced word processing or page layout. Using styles, web page designers specify various attributes of headlines and body text. Font attributes which can be changed include: size, name (family), margins, style, weight, color, line spacing (line height) and paragraph alignment.

Implementation

Style information can be within the document or external to the document. Style information can come from more than one source:

1. In-line style is where an element within a file is assigned style declarations at the location where the element is used.
2. Internal style definition at the head of a document sets style attributes for that entire file.
3. An external style sheet is placed in its own file and can set style properties and values in any HTML file that references the style sheet file.

These three methods can be used in the same file at the same time. The term, Cascading Style Sheets, is often used. Cascading refers to the order in which styles are applied: in-line style takes precedence over an internal style block which takes precedence over an external style sheet.

Note: implementation of style declarations requires an up-to-date web browser. Microsoft Internet Explorer, Version 3.0, offers only partial implementation. Styles are ignored by Netscape Version 3.0 or earlier.

Example of In-line Style

Styles are applied to HTML elements as when needed as in this example of a styled h2 tag:

<h2 style="font-size: 20px; font-family: Arial, sans-serif; margin-left: 25px; color: #003399">Styles Applied Here</h2>

The above is rendered as:

Styles Applied Here

Each style declaration element has two parts: a property and a value, separated by a colon. In this example, the style declaration for <h2> begins with font-size (property): 20px (value).

Notes: 20px means a size of 20 pixels. Multiple property/value pairs can be assigned, separated by semicolons. The entire group of property/value pairs is placed in quotes for in-line style declaration.

Refer to the section below for major attributes controllable by style declarations. This is derived from the official W3C styles documentation.

A Styled Paragraph

<p style="font-family: Verdana Arial, Helvetica, sans-serif; font-size: 13px; line-height: 17px; margin-left: 50px; color: #CC0033">This method is useful ... is acceptable.</p>

The above is rendered as:

This method is useful when you want to apply a style to a specific section of a file. We specify the font-family property in a hierarchy of choices. Here, Verdana is our first choice. If the computer being used to read the file does not have Verdana installed, the paragraph will be displayed in Arial, or failing that, Helvetica. Sans-serif, the final selection, indicates that any sans-serif font style is acceptable.

Internal Style Definition

To start using internal styles, include the following META statement in the HEAD section of the file:
<meta http-equiv="Content-Style-Type" Content="text/css" />

Include a style block in the head section. The style declarations are placed inside this block. Style declarations within the style block should be enclosed in a standard HTML comment, <!--    -->.

Example of a Style Block:

<style type="text/css">
<!--
h3 {
font-size: 20px; color: #CC0033; font-style: italic; margin-left: 15px; font-family: "Times New Roman", times, serif
}

p {
font-family: Verdana, Arial, Helvetica, Sans-serif; font-size: 13px; line-height: 17px; margin-left: 15px; color: #000099
}
-->
</style>

Notes:

The styles above are applied to the following section of this file.

<!--STYLED SECTION BEGINS-->

A Styled H3 Element

This section is an illustration of the paragraph style defined in the style block. A declaration for any styled tag will affect all instances of the tag.

<!--STYLED SECTION ENDS-->

External style sheets

An external style sheet is a separate file that contains style definitions. Any web page can use the styles once the author has set a link to the external style sheet file. A single external style sheet can therefore control presentation aspects of an entire web site or multiple web sites.

To link to an external style sheet, place the following statement in the HEAD section of the file:
<link rel="stylesheet" href="location & name of file" TYPE="text/css" />

The style sheet is a plain text file with a .css extension. The file contains the style declarations in a similar format to an internal style block. Neither the Style nor the Comment tags are required. An example follows:

p {
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size : 12px; line-height : 15px; 	color : #333333
}

h2 {
	font-family : "Times New Roman", Times, serif;
	font-size : 25px; color : #993300;
}

Custom Styles

Custom styles can be defined. Here is an example of a custom style for picture captions, a typical application:

.caption 
{
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; 
font-style: normal; font-weight: bold; color: #3300CC; text-align: center
}

Applying the above custom style:

<div class="caption">Picture caption goes here</div>

This would generate:

Note. The period before the style name is required in the style declaration, but not when the style is subsequently referenced.

Attributes that can be controlled by styles

The W3C styles documentation lists approximately 50 properties that determine the presentation of an HTML document. The following section outlines the most commonly used properties.

Main properties and possible values

More Information

• Web style sheets home page
• WebMonkey's guide to styles
• Complete W3C styles documentation