Style Sheets Basics
Style Sheets Basics
Cascading Style Sheets, CSS, is a powerful addition to the HTML language which improves the layout of www-documents. It is more or less supported in Explorer 3.x and Netscape 4.x. There are several bugs in the earlier implementations in the programs, and the Vocabulary does not list which attributes that are available in which versions, or if they are available but because of a bug useless. There are three methods to write the code, either by local, global or linked definitions. A local stylesheet is the easiest one to use, while global and linked stylesheets are more powerful. IE NS4

Local Style Sheets
STYLE="attrib1: value1 [;attrib2: value2 [...]]"
Adding this parameter into a tag will change the appearance of the text between the start and end tags. Local style sheets can be called from almost every tag which has an ending tag, for example <DIV>, <P>, <SPAN> and <FONT>. The attributes and the values are separated with colons and different attributes are spearated with semi-colons. See below for available attributes.

Global Style Sheets
<STYLE TYPE="text/css">...</STYLE>
This tag should be inserted within the HEAD-tags. A global style sheet can be called anywhere in the document by using the name of the definition, see below. TYPE is the MIME-type of the style, and must be "text/css".

<!-- tagname [.name ] {attrib1: value1 [;attrib2: value2 [...]]} -->

This code should be inserted between the <STYLE> and </STYLE> tags. To make the code invisible for old browsers that does not support stylesheets, it's written as a comment. The tagname is the name of the tag that should use the stylesheet definitions, for example FONT. If the optional one-word name is added, only tags that use the CLASS-parameter described below will use the definition. The code between { and } defines the attributes of the text which will use the definition. See below for available attributes.

CLASS="name "
Adding this parameter into a tag will change the appearance of the text between the start and end tags. The parameter can be called from almost every tag which has an ending tag, for example <DIV>, <P>, <SPAN> and <FONT>, just like a local stylesheet. The value is the name set in the definition, as described.

Linked Style Sheets
<LINK REL="stylesheet" HREF="url " TYPE="text/css">
This tag should be insearted between the HEAD-tags. A linked style sheet is similar to a global style sheet, but use an external document instead. Using linked style sheets in a lot of pages, the appearence of the text can be changed by just edit the linked style sheet-file. HREF is the url to this file, usually with a .css-suffix. The linked file can be any document which has global style sheet codes. TYPE is the MIME-type and must be "text/css".

CLASS="name "
This parameter can be added to different tags in the same way as with a global style sheet, see above.

Style Sheets Attributes
All attributes are optional, and you may use only one or even all of them together.

font-size: n pt|px|pc|em|in|mm|cm|% | xx-small|x-small|small|medium|large|x-large|xx-large
The size of the text either by a number followed by a metric measure, for example 10pt, or by a cariable. 12pt = 12px = 1pc = 12em = 0.17in = 6.3mm = 0.63cm = 100% = medium.

font-family: fonts [, serif|sans-serif|cursive|fantasy|monoscape]
Defines the font of the text, see the Appendix for more information. You may also define a font family, that will be used if none of the given fonts are available. For example, if the monospaced font you've defined does not exist, adding "monospace" will display another monospaced font instead of the standard font.

font-weight: demi-light|extra-light|lighter|light|medium|bold|bolder|extra-bold|demi-bold|n
Defines the weight, boldness, of the text. It can be set as a variable or by a number, recommended between 100 and 900.

font-style: normal|italic|oblique
Defines the style of the text.

text-decoration: [underline] [,overline] [,line-through] [,blink] [,italic]
A comma-separated list of textstyles.

line-height: n pt|px|pc|em|in|mm|cm|%
Defines the space between two baselines.

text-align: left|center|right|justify
Defines the alignment of the text.

text-indent: n pt|px|pc|em|in|mm|cm|%
Defines the space to the left margin.

color: color
Set the color of the text. There are 139 specified colornames (not listed in the Vocabulary) to use. Note that colors specified by their RGB-values will appear differently on different platforms.

background: url(url )|color
Defines the background, either a picture defined by its URL or a color. URLs should be written within parentheses.

margin-top: n pt|px|pc|em|in|mm|cm|%
Defines the top margin.

margin-left: n pt|px|pc|em|in|mm|cm|%
Defines the left margin.

margin-bottom: n pt|px|pc|em|in|mm|cm|%
Defines the bottom margin.

margin-right: n pt|px|pc|em|in|mm|cm|%
Defines the right margin.