contents introduction reference index previous next

HTML 4 - User's Guide
Style properties and the STYLE element

Contents:
1. SAMPLES
1.1 Property values assigned by an external style sheet
1.2 Property values assign by a STYLE element content
1.3 Property values assigned by a style attribute
2. USAGE
2.1 Style properties
2.2 Element set
2.2.1 Individual element
2.2.2 Element classes
2.2.3 Element types
2.4 Heritage and overrides
2.3.1 The STYLE element
2.3.2 External style sheets
2.3.3 The 'style' attribute
3. SYNTAX
3.1 Property list
3.1.1 Value assignment expression
3.1.2 Property list
3.2 Property value assignment declaration
3.3 Assigning an element to classes
3.4 Property value assignment through the style attribute
3.5 Style properties list
The appearence of an HTML page as rendered by a user agent is determined by the values assigned to a number of properties such as : background color, character font, text alignment, etc. These properties are defined in the CSS (Cascading Style Sheet) specification.

A style sheet is a set of codes that assign values to some of the properties for general categories of elements. One such assignment can for example, set the background color of all tables to yellow. The use of style sheets simplify the author's work in that property values can be assigned once for large categories of elements.

A style sheet can be external, or internal. An external style sheet is contained in a file separate from the HTML document. An internal style sheet is contained in a <STYLE> element within the HTML page.

To retain flexibility, provision is made for defining properties specifically for an individual element. This is through the style attribute of the element.

1. SAMPLES

1.1 Property values assigned by an external style sheet

<HTML><HEAD><TITLE></TITLE>
  <META http-equiv="Content-Type" content="text/html">
  <LINK rel="stylesheet" type="text/css" href="CSSStyle.css">
</HEAD>
<BODY>
European flowers
   <TABLE>
     <TR><TD class="primus">Old man's beard</TD><TD>Western Europ</TD></TR>
     <TR><TD class="primus">Pheasant's eye</TD><TD>France</TD></TR>
     <TR><TD class="primus">Cowslip</TD>
         <TD>England and Wales, Scotland</TD></TR>
   </TABLE>
</BODY></HTML>
The LINK element references an external file by the href attribute. The referenced file, CSSStyle.css, is in the same directory as the HTML document. Its content is:
TR {background:yellow; color:red;}
TD.primus {background:lime; font-weight:bold;}
To see the result, please click here.

Each of the lines is a declaration that assigns property values to some category of elements

The first declaration contains:

- The name 'TR' in the first position - that is the selector part of the declaration - it says here that property values is being assigned to elements of the 'TR' type (which are table rows -- but you need not know about tables; to understand the upcoming discussion, it suffices that you see there are TD elements included in the contents of the TR elements)
- Within the curly brackets there is a list of 2 property value assignments
. background:yellow assigns the value 'yellow' to the property 'background' - this property describes the background color of the element to which it applies - in this example, the 'yellow' color is assigned to the background color of all 'TR' element, i.e. of all table rows.
. color:red assigns the value 'red' to the 'color' property - this property describes the foreground color, i.e. the color of the characters contained in the element - in the example, the 'red' color is assigned to the foreground color of all 'TR' elements, i.e; to all table rows.
The overall result is to write red characters over a yellow background in all the rows of a table.
The second declaration contains:
The symbol 'TD.primus' which represents all the elements of the 'TD' type that pertains the class 'primus', i.e; that have the attribute value class="primus".
- Within the curly brackets there is a list of 2 property value assignments
. background:lime assigns the value 'lime' to the property 'background' - in this example, the 'lime' color is assigned to the background color of all 'TD' element, i.e; all table cells, of the class 'primus'.
. font-weight:bold assigns the value 'bold' to the 'font-weight' property in all the elements to which the declaration applis - in the example, characters in all 'TD' elements of the 'primus' class will have a bold typeface.
You can see that:
- characters are in red everywhere, and the second column background is yellow: this is the result of the first declaration
- characters are in bold typeface and the background is green (this is the 'lime' color as defined by the HTML specification): this is the result of the second declaration
Here are the notable facts:
- The yellow background and red character properties are defined for the TR element. They have been propagated to the TD elements which are contained in TR. This is the heritage phenomenon.
- The background in the first column is not yellow, but green, as defined by the declaration concerning the 'primus' class. Incidentally, the TD elements in the first column pertain the the 'primus' class because they have the class="primus" attribute. The backgound color assignment by the second declaration overrides the assignment inherited from the first. This is because the TD element is inside the TR element: a property value for an element overrides the value inherited from the containing element.
- In the 'primus' class TD, the bold typeface property is added to the red color property inherited from the TR element, with which it does not conflict.

1.2 Property values assigned by a STYLE element content

<HTML><HEAD><TITLE></TITLE>
  <META http-equiv="Content-Type" content="text/html">
  <STYLE>
    TR {background:#DDDDFF; font-style:italic;}
  </STYLE>
  <LINK rel="stylesheet" type="text/css" href="CSSStyle.css">
</HEAD>
<BODY>
European flowers
   <TABLE>
     <TR><TD class="primus">Old man's beard</TD><TD>Western Europ</TD></TR>
     <TR><TD class="primus">Pheasant's eye</TD><TD>France</TD></TR>
     <TR><TD class="primus">Cowslip</TD>
         <TD>England and Wales, Scotland</TD></TR>
   </TABLE>
</BODY></HTML>
This example is taken up from the first with only the STYLE element added.

The declaration in the content of the STYLE element concerns the element type TR element:
- the background color is to be #DDDDFF which is a pale blue color
- characters are to be in italic typeface

You can see that the only change in the result is that characters are in italic. typeface. The background color assignment is not taken into consideration.

This is because of the order of the declarations. In the sample document, the STYLE element comes first. Its declaration is processed first. Then comes the LINK element which references the external style sheet. Value assignments from this style sheet override those from the previous ones, where they conflict.

1.3 Property values assigned by the style attribute

<HTML><HEAD><TITLE></TITLE>
  <META http-equiv="Content-Type" content="text/html">
  <LINK rel="stylesheet" type="text/css" href="CSSStyle.css">
  <STYLE>
    TR {background:#DDFFDD; font-style:italic; font-weight:normal}
    TD.primus {background:#FFDDDD;}
  </STYLE>
</HEAD>
<BODY>
European flowers
   <TABLE>
     <TR><TD class="primus">Old man's beard</TD><TD>Western Europ</TD></TR>
     <TR><TD class="primus">Pheasant's eye</TD><TD>France</TD></TR>
     <TR><TD class="primus" style="background:red; color:yellow">Cowslip</TD>
         <TD>England and Wales, Scotland</TD></TR>
   </TABLE>
</BODY></HTML>
This example is again taken up from the first. Now the LINK element is placed before the STYLE element. Declarations from the latter will prevail over declarations at the same level in the former:
- The first declaration in the STYLE:
. assigns the value #DDFFDD to the background property: this is the pale green color you see in the second column
. assigns the 'italic' value to the font-style property: you can see the result on all the table
. assigns the 'normal' value to the font-weight property: this does not override the 'bold' value defined in the external style sheet for the TD elements in the 'primus' class (table first column) - this is because the declaration in the SCRIPT element concerns TR elements and is inherited by TD elements; it is therefore overridden by assignments specifically declared for the latter.
- The second declaration in the STYLE assign the value #FFDDDD which represent a reddish color to the first column background.
The first TD element in the last row has a style attribute. This attribute is assigned a list of property value assignments:
- background:red assings a red color to the background
- color:yellow assings a the yellow color to the foreground, i.e. the characters
The declaration by the style attribute overrides all the declarations in the style sheet, wherever they conflict.

2. USAGE

2.1 Style properties

The appearance of an HTML as rendered by a user agent is dependent upon properties that are conceived of as pertaining to the document as a whole, or to certain of its elements. Examples of such properties are:
- background color,
- font size, style or weight,
- table border style, color, thickness,
- etc...

The HTML language uses the set of properties defined in the CSS specification. These properties are identified by their names. Each of these properties has a defined set of possible values. To see the list of the properties currently available for rendering on a visual medium, please click here.

Each property has an initial value which is the value its takes on if you (the HTML author) don't redefine it. Therefore, if you don't care about presentation, you can simply ignore these properties and the present chapter.

2.2 Element sets

2.2.1 Individual element

An element you code into the source HTML document, for example:
<EM>this is important</EM>
is called an individual element in this document.

2.2.2 Element classes

Individual elements can be grouped into classes. A class with a given name comes into existence when you assign that name to the class attribute of an element. All of the elements of a given type and having a class attribute of the same value constitute the class with that value for a name. Example:
<SPAN class="beware">
assigns this individual 'SPAN' element to the class called 'beware'. This class exists by the fact that it is named somewhere. All the elements of the type 'SPAN' that have the class attribute with the value 'beware' pertain to the class 'beware' of the type 'SPAN'. But for the class to be effective, its properties must be defined in some style sheet.

An individual element can be assigned to more than one class. This is achieved by assigning a list of class names as a value to its class attribute

2.2.3 Element types

Finally an element type is a set that encompasses all the elements that have the same tag name.

2.3 Property value assignment

Values can be assigned to a set of properties with these different scopes:
- element type assignment: the values are assigned to the properties for all elements of a given type.
- class assignment: the values are assigned to the properties for all elements of a class in a given type.
- individual element assignment: the values are assigned to the properties for an individual element

Assignments to an element type or an element class are specified either in a STYLE element, or in a style sheet

Assignments to individual elements are specified through the style attributes of the latter.

2.3.1 The STYLE element

STYLE elements are placed in the HEAD element contents. Its content is a set of property value assignment declarations.

Each declaration assigns a list of property values to an element type or an element class in a type.

The content of the STYLE element is also called a style sheet.

2.3.2 External style sheet

An external style sheet is a file separate from the HTML file, that contains a set of property value assignment declarations. This is exactly the same as the content of a STYLE element.

The external file is referenced by a <LINK> element, which is placed in the content of the HEAD element:

<LINK ref="stylesheet" type="text/css" href="stylesheet-file-uri"
where the rel and type attributes are to have the indicated values, and 'style-sheet-file' is the URI of the file containing the style sheet.

2.3.3 The 'style' attribute

The style attribute assigns a list of property values to the element where it is used.

This attribute is part of the core attributes and is allowable in almost all elements.

2.4 Heritage and overrides

Here is some terminology to what is called the document tree. This will help us discuss the working of heritage.

An element contained in another element and in no other is a child of this element. The latter is the parent of his child, ans of all its other children. Contrary to human beings, an element always has but one parent. Example:

<DIV>Gentlemen, I <SPAN style="color:red">must <EM>emphasize</EM> the importance</SPAN> of this</DIV>
In this example, the SPAN element is a child of the DIV element. The EM element is not, because it is also contained in the SPAN element.

An element contained in another element, with no qualification, is a descendant of the latter. A child therefore is also a descendant. In the above example, the EM element is a descendant of the DIV element, although not its child.

An element descendant of another is said to be at a lower level in the tree, the other is at a higher level higher.

This is enough to discuss how heritage works.

When properties are assigned values to some element, most of these values are propagated to its descendants, unless some other values are assigned at a lower level in the tree. The descendants are said to inherit the property values.

The properties the values of which are propagated to the descendants are those which are by nature inheritable.

When a property has values assigned at different levels, the general rule is that the values assigned at a lower level override those assigned at a higher level.

The property assignment declarations in the style sheets are at the highest level. For a given element, assignment by the style attribute of the element is at the lowest level. Therefore, the values assigned by the style attribute override all of the other values.

3. SYNTAX

3.1 Property list

3.1.1 Value assignment expression
Value is assigned to a property through a value assignment expression noted as a property name / property value pair, separated by a colon:
property-name : property-value
White space around the colon sign is optional. Example:
border : thin solid red
The property name is 'border', the assigned value is the list 'thin solid red'. Note that there are no quotes around the list.

3.1.2 Property list
A property list is a semi-colon separated list of value assignment expressions. Example:
border : thin solid red ; background:lime; margin: 0.2em
White space around the semi-colon sign is optional.

3.2 Property value assignment declaration

General property value assignment is achieved through one of the following declarations:
for an element type:type {property-list}
for a class of a type: type.class-id {property-list}
where:
- type is the type name of the elements
- class-id is the id of a class in the named type
- property-list is a property list as defined in 3.1.2 above
The first notation assigns the property values in the list to all of the elements of the specified type. The second notation, with the class-id qualifier, assigns the property values in the list to the elements of the named type which have a class attribute with the class-id as its value. Examples:

SUP {font-size: 70%; font-color: red;}
This declaration assigns to the text in the contents of any SUP element the property values:
- font size is 70% the size of the general font size
- the color of the characters is "red".

TR {vertical-align:top;}
This declaration assigns the value 'top' to the 'vertical-align' property in all the TR elements (which represents a row in a table - the property aligns the text to the top of the cells in all rows - the syntax is presented below)

DIV.hilite {background:#FFFFDD; font-color: blue; font-style: italic}
This declaration assigns to all DIV elements in the 'hilite' class (<DIV class="hilite" ... >) the following property values:
- background - value: #FFFFDD - this gives a cream color to the element background
- font-color - value: blue - this causes the characters in the element to be in blue
- font-style - value: italic - this causes the characters in the element to be in italic typeface

3.3 Assigning an element to classes

An element is assigned to one or more classes through the class attribute:
class="class-id-list"
where class-id-list is a space separated list of class ID's (commas may not work).

The class attribute is part of the core attributes that almost all elements possess.

Example:

<DIV class="b-cream f-blue f-bold"</DIV>
This assigns to the element all the property values defined for the 'b-cream', 'f-blue' and 'f-bold' DIV classes.

3.4 Property value assignment through the style attribute

Property values can be assigned to an individual element through the style attribute:

style="property-list"
where 'property-list' is a property list as presented in 3.1.2 above.

These values override those, if any, specified in a STYLE element or a style sheet for the relevant element type or class in the element type.

The style attribute is part of the core attributes that almost all elements possess.

Example:

<TD style="background:yellow;color:blue"</TD>
This assigns the following property values to the TD element:
- background: yellow - the background of the TD cell is yellow
- color: blue - the characters in the TD cells are blue

3.5 Style properties - list

To see the properties that apply to visual media, please click here
contents introduction reference index previous next
back to top