Style Sheets

Terms

CSS is the acronym for "Cascading Style Sheets", also known as simply "style sheets". CSS language-Level 1 (CSS1) was the first implementation. Microsoft Internet Explorer 4.01 is CSS1 compliant. The current implementation is CSS2. MSIE 5.0 is mostly CSS2 compliant. For more on CSS2, see the World Wide Web Consortium's page at http://www.w3.org/TR/REC-CSS2/. CSS2 gives access to all the colors used by a viewer's system. It also adds some properties such as text-shadow, font-stretch, min-width, quotes, marker-offset, table-layout, widows, and speak. For a quick review on the evolution of style sheets, see cNet's article.

Cascading refers to the fact that a CSS-compliant browser will follow a specific order in interpreting style data. For more about the cascading aspect of stylesheets, see the cNet article.

Class relates to the way you break down style rules into small pieces for use. Each specially-created text format you define via a style is called a style class. The general syntax for a class is: TAG_NAME.class_name {declaration}. Note that a period separates the tag name from the class name. The "links" class created for links paragraphs on this page (this example also uses properties grouping in the declaration):
P.links {font: 10pt arial}

Declaration. Properties plus values, enclosed in braces.
Example: H2 {type-family: arial, helvetica, sans serif;}
Note the colon after the property and the ending semicolon. Also not that capital letters are not required.

Grouping is when you condense style declarations as much as possible. This yields smaller rules. You could, for example, create three separate styles for producing a font style of Arial Bold 12 point. But all can be condensed into one style with a unique class designation. The order of the properties is critical when grouping properties in a declaration. For type, the order is weight, style, size, a forward slash, the line height (leading), then font name. (any of these not needed can be omitted).

An ungrouped paragraph style:
P.1 {font-weight: bold; font-style: normal; font-size: 12pt; line-height: 14pt; font-family: arial;}

Grouping of properties: P.1 {font: bold normal 12pt/14pt arial;}

Example of selector grouping: H1, H2, H3, H4 {font-family: arial;}

Inheritance means that other parts of an HTML page will use the style information unless the style is deliberately changed by adding a new one (inline).

Property. The main description of the style sheet language. A property defines a selector. You can group properties.
Example of a property: H1 {type-family: times new roman;}.

Pseudo-class. In order to allow control of some elements that are not normal tags, CSS2 uses defined "fake" classes -- pseudo-classes. A pseudo-class is placed immediately after the appropriate tag, with a colon at the start of the pseudo-class.
Example of a pseudo-class: P:first-line {font-weight: bold}

Rules. CSS2 defines five rules. They allow access to files outside the current HTML document. The rules in CSS2 are: @charset, @font-face, @import, @media, and @page. Some people also use "rule" to mean the combination of a selector and the accompanying declaration.

Selector. Tag elements defined at the beginning of a style. This part gets the attributes you assign. Selectors are usually standard HTML elements such as headings, paragraphs, and lists. You can group selectors.
Example of a selector = H1 {type-family: times new roman;}.

Style. Any type of HTML code design element. This includes background, margins, positioning of objects, text and link attributes such as color and underlining, and typeface.

Value. Values define properties.
Example: H1 {type-family: times new roman;}.
Note the use of a colon after the property and a final semicolon after the value(s).

Types of Style Sheets

Inline. Adding style to any HTML tag. This lets you have the most control, but can also mean duplicating lots of code throughout your pages. You can add style information to paragraphs, horizontal rules, table cells, anchors, etc.. This is where you could add information about typeface, e.g. font, point size, and color. Changing font text-decoration to nothing removes underlines from hyperlinks, for example. Two tags can help apply styles within sections of a document: <div> and <span>. The effective difference between the two is that <div> forces a line break after itself. The <span> tag doesn't force a line break. So <span> is more useful within sentences and paragraphs. <div> would be more useful when including whole paragraphs or other sections of the HTML document. When you finish a site, review the pages to see if you can economize by rolling inline styles into embedded ones or even a linked style sheet.
Embedded. Using the <style> tag within the <head> section of an HTML file. This applies the attributes to that page. You "declare" the styles in the head area, then use them in the page. This page uses both Heading and Paragraph styles to set margins. Hide embedded style sheets from older browsers by using the  comment tags before and after the actual style commands (i.e. before and after the <STYLE> tag).
Linked. External style sheets that use a ".css" file. Any page in your site that links to that CSS file automatically applies the attributes listed in the file. Styles use hierarchy. That is, an inline style overrides an embedded style, which overrides a linked style. The "closest" style "rules". Below is a sample HTML code for a linked style sheet.

<LINK rel=stylesheet href="filename.css" type=text/css">

Style sheet syntax

Text & space properties & values

margin-left. You can specify points, inches, centimeters, or pixels.
Example: P.1 {margin-left: 120px;}. The "margin-left" property creates all the indented text on this page.

margin-right. CSS lets you specify negative margins. This can create overlapping areas. You can see some layer samples at a Microsoft Web site. Combining a margin-left with a margin-right property in a style can give the blockquote effect.

margin-top. Older browsers may not support negative margins. Check it out.

text-indent. This indents the first line of text. This could add the traditional indent at the start of paragraphs. If you want every line of the paragraph to indent, use the margin-left property. For two samples of text-indent, see Microsoft's related Web page.

text-align. Values include left, right, and center as well as distance. This reduces the need for tables and divisions to artificially position elements on a page.

You can add margin values to any HTML tag you want, including individual headers or paragraphs. The H2 headings on this page use an embedded style that specifies the left margin. A style group (H1 through H6) specifies the font attributes and a separate H2 style specifies the font color. This page uses styles instead of the <font> tag, which is outdated.

Styles -- Web sites

[The hyperlinks below have the "text-decoration: none" style applied, so are not underlined if your browser is CSS2-compliant. MSIE 5.0 is generally compliant with CSS2.]

CSS overview
Microsoft SiteBuilder - contains very good references
Microsoft - Web Authoring
WebBuilder Magazine
Web Review Style Sheets Reference Guide
World Wide Web Consortium style sheet section

Return to top