Introduction to Style Sheets: Example One

Here is a copy of a sample style sheet found at the World Wide Web Consortium site. According to W3C it is informative, not normative. In other words it is to help people learn, not to be the rule to be followed. This Style Sheet could be included in an Embedded Style Sheet or in an External Style Sheet. There is a working example of a page that uses this style sheet included on this site as well. In the example the style sheet is embedded in the head of the document. All standard HTML tags are shown in BLOCK CAPITAL letters to separate them from the style sheet descriptors. Notice a few things about the coding.

• Each Style starts and ends with a curly brace { }
• Each descriptor ends with a colon :
• Each part of the style ends with a semi-colon ;
• As with all HTML files, spacing caused by typing is of no consequence.

BODY {

margin: 1em;

font-family: serif;

line-height: 1.1;

background: white;

color: black; }

H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV, DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR, FORM, DL {

display: block}

B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP, IMG, SPAN {

display: inline }

• LI { display: list-item }
• H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
• H5, H6 { margin-top: 1em }
• HI { text-align:center }
• H1, H2, H4, H6 ( font-weight: bold }
• H3, H5 { font-weight: italic }
• H1 { font-size: xx-large }
• H2 { font-size: x-large }
• H3 { font-size: large }
• B, STRONG { font-weight: bolder }
• I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE ( font-style: italic }
• PRE, TT, CODE, KBD, SAMP { font-family: monospace }
• PRE { white-space: pre }
• ADDRESS { margin-left: 3em }
• BLOCKQUOTE { margin-left: 3em; margin-right: 3em }
• UL, DIR { list-style: disc }
• OL {list-style: decimal }
• MENU { margin: 0 }
• LI { margin-left: 3em }
• DT { margin-bottom: 0 }
• DD { margin-top: 0; margin-left: 3em }
• HR { border-top: solid }
• A:link { color: blue }
• A:visited { color: red }
• A:active { color: lime }
• A:link IMG { border: 2px solid blue }
• A:visited IMG { border: 2px solid red }
• A:active IMG { border: 2px solid lime }

A number of these tags have been deprecated and / or are no longer in use. Again, this sheet was designed to show what might be done, not what needs to be done.

Other Possibilities
Start Page	Style Sheet Home
Web sites of note
Hands On Communication Main Page
Robert Boardman	Send email

page designed and published by Hands On Communication

First posted: 27 July 2001, 27 juillet 2001
Last edited: