HTML Style Sheets

Purpose of Style Sheets

The purpose of style sheets is to separate the content of the HTML documents from their style. This makes control over the style much easier and group efforts easier since content of an entire set of HTML pages can be easily controlled using one or more style sheets.

STYLE sheets or the inline STYLE element will allow you to set custom margin sizes, and the text font, color and sizes of various elements that are used on your web page. Size of margins can be set in inches (in), pixels(px), percentages (%), centimeters (cm) or the (em). The unit of em is the em is the height of the font. Two em units is twice the height of the font. When the em units are used, everything is scaled relative to the font so the scaling will remain the same regardless of the font used.

Methods of Including Style

Methods of including style content in an HTML document:

Embedding - Use the STYLE element in the HEAD element to create a style sheet that is embedded in the header. Example:

·         <style type="text/css" MEDIA=screen>

·         <!--

·            body {background-color: "#ffffff"; color: "#000000"; background: url('../../../../gifs/flowers.gif') }

·            a:link { color: "#0000ff" }

·            a:visited { color: "#7f007f" }

·            a:active { color: "#ff0000" }

·            h3 { color: "#600060" }

·         -->

·         </style>

Linking - Use the link element in the HTML header to link an external text file style sheet to the HTML document. Example:

Importing - One style sheet may be imported from another by using the "@import" command in the style sheet that is performing the import.
Inline - Style information may be included with each individual element using the STYLE attribute which is common to all elements. See the "Common Attributes" section. Many examples in this document show style being controlled using the STYLE attribute. Although this is acceptable for specific elements whose characteristics must be different such as the color of a horizontal line, it is wiser to control most element style using the external style sheets

The STYLE Element

Attributes:

Type - Defines the content type such as "text/css".
Media - Defines the intended media the page will be displayed on. Values include all, aural, braille, handheld, print, projection, screen, tty, and tv.
Title - Gives the title sheet an optional title

Example Embedded Style Sheet

When setting document style, place the STYLE element with the <STYLE> beginning tag and </STYLE> ending tag between the HEAD and the BODY elements. Therefore placement would be as follows:

<html>
<head>
<title>Example Style Settings</title>
</head>
<style type="text/css">

</style>

Other settable parameters include:

font-style: italic
font-weight: bold
font-size: 200% - Indicates twice the size of normal text.
font-family: roman, serif, "Times New Roman"
text-transform: uppercase
background-color: blue

The section "CSS Properties" contains a more complete list of parameters and the elements they work with

Setting an HTML Page with a Style Sheet

To set an HTML page up to use a style sheet, a link must be provided in the header section as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Arachnophilia 3.9">
<meta name="description" content="The Computer Technology Documentation HTML Guide - Setting Document Style">
<meta name="keywords" content="Documentation, HTML, html document style, style, setting document style, setting html document style">
<title>The CTDP HTML Guide - Setting Document Style</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
.
.
.
</body>

The Style Sheet File (style.css)

body {background-color: #ffffff; color: #000000; background: url('../../../../gifs/flowers.gif') }
a:link { color: #0000ff }
a:visited { color: #7f007f }
a:active { color: #ff0000 }
h1, H2 { text-align: center }
h3 { color: #600060 }
blockquote { color: #0000ff }
pre { color: #0000ff }
.indent { margin-right: 5%; margin-left: 5%; color: #0000ff }
.center { text-align: center }
.firstindent { text-indent: 2em}
div.outline { border-top: solid medium navy }
hr { color: #80b0ff; height: 5; width: 50%; text-align: center }
hr#firsthr { color: #80b0ff; height: 15; width: 100% }

This style sheet is used to set the style for various HTML elements on every page of this document. To change the style, only the style sheet needs to be changed. Note that the style sheet sets the wallpaper for the HTML page along with the background color, foreground color, active link color, visited link color, and unvisited link color(A:link). It also sets colors for the BLOCKQUOTE and PRE elements along with defining some CLASS characteristics and one ID characteristic.

Using the CLASS Attribute

The CLASS and ID attributes allow very convenient and precise control of the style of specific elements in HTML documents. The CLASS attribute allows attributes to be assigned to almost any element based on a class name. Class style information is specified in the style sheet with the period, ".", followed by the class name as in the following example:

.indent { margin-right: 5%; margin-left: 5%; color: #0000ff }

Note that this same line is used in the example style sheet above. To use this in the HTML file, when the beginning tag of the element is declared, the class is specified as in the following statement:

This causes the paragraph element to have the style characteristics assigned to the class "indent" so long as those style characteristics are appropriate to the element they are being applied to. In this case the paragraph element is indented much like the blockquote element and its color is also set to blue. Classes may also be assigned to specific elements so they can only be used with that elements. Assingments in the style sheet to specific elements similar to "PRE.center { text-align: center }".

Using the ID Attribute

The ID attribute is useful since it allows you to specify exactly which element will have the desired style. This is done with a line like the following as shown in the style sheet example above.

hr#firsthr { color: #80b0ff; height: 15; width: 100% }

When the first horizontal line is declared on the HTML page it is declared as follows:

The line for the code in this example is at the top of this page. All other lines on the page appear as defined by the following entry from the above style sheet:

hr { color: #80b0ff; height: 5; width: 50%; text-align: center }

The line appears below and in several other places on this page. Please note that ID selectors are not required to be associated with a specific element in the style sheet although I think it makes more sense to do so.

Context Selection

Allows elements containing inline elements to have special assigned values as in the following example:

table b ( color: red }

This example sets the color of any bold text in a table to red.

Grouping Elements for Style Characteristics

The example above contains the following line:

h1, h2 { text-align: center }

This line allows style characteristics to be assigned to both elements H1 and H2 at the same time. The elements are separated by commas.

Pseudo Classes

Some elements have specific automatially assigned classes. For example the anchor (A) element has the classes link, visited, and active. The following lines in the style sheet assign color style characteristics to these classes.

a:link { color: #0000ff }
a:visited { color: #7f007f }
a:active { color: #ff0000 }

Note that the element is separated from the pseudo name using a colon. Also a "first-line" and a "first-letter" pseudo class exists for each block element