introduction
definitions
referencing the style sheet from the main document
rules for classes and inheritance for the style sheet
properties

introduction to the CSS1 formatting model

Properties adhere to entities giving them style.

A property is a property name followed by a property value separated by a colon.

h1 {property_name:property_value; property_name:property_value; property_name:property_value}

In HTML each element will have its own set of properties, the list of which is determined by the UA in use. Which properties are applied to an element in question (HTML) is determined by the rules of inheritance. Multiple properties of an element may be specified by including multiple property name, value pairs separated by semicolons.

The list of elements and their corresponding properties is put into a style sheet, and linked to the main document.

definitions

inheritance

Certain things, if declared multiple cases, may apply only when it is the outmost selector. In this case, the property must be declared when the selector is nested inside another outer thing for which there is a declaration.

element

element-name { property: list }

An element is the name of an HTML tag (H1,P, DIV, etc.) and the property list is the associated style commands.

rule

a selector (e.g. 'H1') and its declaration (e.g. 'font-family: helvetica')

declaration

We "declare" a rule, so it is the list of properties (e.g. 'font-size') and corresponding values (e.g. '12pt')

a display property

can be either of the three following things:

block: floating elements and stuff delimited by breaks, as the
in HTML; lists
in HTML these are predefined for the various tags

the box model for block elements

includes such specifiers as margins (left,right,top,bottom) and padding

property

a property is a property name followed by a property value separated by a colon.

selector

the H1 in the following:

H1 { -------:-------; ----------:---------}

pseudo-element

pseudo-elements are used in CSS selectors to address typographical items (e.g. the first line of an element) rather than structural elements.

pseudo-class

pseudo-classes are used in CSS selectors to allow information external to the HTML source (e.g. the fact that an anchor has been visited or not) to classify elements.

declaration

what comes between the brackets in the above

text properties

includes:

font-family
font size
line height
font weight
color

Including Your Style Sheet in Your Html Page

Including the style information stored in the css sheet can be done in multiple ways:

1. inside

2. In the

3. Directly in the STYLE attribute of individual elements of the document.

This method is recommeneded for raw beginners who like to see what results their changes are making to the document formatting. Other people will like to use the class attribute to differentiate.

4. The @import command allows explicit importation.

@import url(http://localhost/style.css)

this example shows four ways to combine style and HTML



  
    
 REL=STYLESHEET TYPE="text/css" HREF="http://style.com/cool" TITLE="Cool">
    
  
  
    Headline is blue
STYLE="color: green">While the paragraph is green.

rules for classes and inheritance

subclassing elements
sub-classing by id
pseudo-classes
cascade: rules of inheritance
inheritance

Subclassing Elements

Sometimes it is desirable to treat specific instances of an element differently. For example, you might want to make certain table cells blue in their background, or create color effects based on location, etc. There are many instances where sub-classing comes in handy.

This is a place where you can really use style sheets to your advantage. Using the CLASS attribute different formatting rules can be used to assign a specific formatting rule to that type of element. As an example, consider the following:

...

To specify the styles for elements of a particular class, add the class name to the element name with a period in the style sheet:

P.blue { properties }
A.red { properties }

Subclasses and nesting are independent operations. You can mix them freely in your style sheet.

Subclassing by ID

Another form of subclassing is by ID. This is the mechanism that allows you to avoid embedding specific style information in your document even for a unique element. If you have a specific element that must be uniquely treated, you can give it an ID:

and then assign style information to that element with a number sign # as follows:

#special-case { properties }

Note that IDs are required to be unique within a document. This requirement may not be enforced by current browsers, but it is a requirement for a truly conforming document. If you have several elements that need special treatment, that's a CLASS.

Pseudo-Classes

Several pseudo elements can be combined in the style tag:

P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }

In this example, the first letter of each 'P' element would be green with a font size of 24pt. The rest of the first line (as formatted on the canvas) would be blue while the rest of the paragraph would be red. Assuming that a line break will occur before the word "ends", the fictional tag sequence is:

S ome text that ends up on two lines

Note that the 'first-letter' element is inside the 'first-line' element. Properties set on 'first-line' will be inherited by 'first-letter', but are overridden if the same property is set on 'first-letter'.

Pseudo-classes are, like classes, specified with the element in the style sheet. Pseudo-classes use : as the separator character. Classes and pseudo-classes may be mixed:

A:visited { properties }
P.initial:first-letter { properties }

The first example here changes the properties of visited HTML links, the second changes the properties of the first letter of paragraphs with the CLASS "initial".

Cascading order

A simple scheme is provided for specifying presentation based upon parent elements (you can specify formatting for EM inside of H1, for example, as distinct from EM elsewhere).

If you list a series of element names, instead of a single name, in a formatting rule, that rule applies only to elements that have all of the parents listed. For example

DIV H1 EM { properties }

assigns the specified properties to EM only if it occurs inside of an H1 inside of a DIV. Note that other intervening elements are possible; this rule would apply to an EM inside of an H1 inside of a TABLE inside of a DIV as well. If multiple nestings apply, the longest nesting wins.

Conflicting rules are intrinsic to the CSS mechanism. To find the value for an element/property combination, the following algorithm must be followed:

Find all declarations that apply to the element/property in question.

Declarations apply if the selector matches the element in question. If no declarations apply, the inherited value is used. If there is no inherited value (this is the case for the 'HTML' element and for properties that do not inherit), the initial value is used.

Sort the declarations by explicit weight:

declarations marked '!important' carry more weight than unmarked (normal) declarations.

Sort by origin:

the author's style sheets override the reader's style sheet which override the UA's default values. An imported style sheet has the same origin as the style sheet from which it is imported.

Sort by specificity of selector:

more specific selectors will override more general ones. To find the specificity

count the number of ID attributes in the selector
the number of CLASS attributes in the selector
and the number of tag names in the selector

Concatenating the three numbers (in a number system with a large base) gives the specificity. Some examples:

LI {...}	a=0 b=0 c=1 -> specificity = 1
UL LI {...}	a=0 b=0 c=2 -> specificity = 2
UL OL LI {...}	a=0 b=0 c=3 -> specificity = 3
LI.red {...}	a=0 b=1 c=1 -> specificity = 11
UL OL LI.red {...}	a=0 b=1 c=3 -> specificity = 13
#x34y {...}	a=1 b=0 c=0 -> specificity = 100

note: Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.

Sort by order specified:

if two rules have the same weight, the latter specified wins. Rules in imported style sheets are considered to be before any rules in the style sheet itself.

The search for the property value can be terminated whenever one rule has a higher weight than the other rules that apply to the same element/property combination. This strategy gives author's style sheets considerably higher weight than those of the reader. It is therefore important that the reader has the ability to turn off the influence of a certain style sheet, e.g. through a pull-down menu.

A declaration in the 'STYLE' attribute of an element has the same weight as a declaration with an ID-based selector that is specified at the end of the style sheet:

Because this paragraph was preceded by the tag

its color is red. Although the specificity is the same for both declarations, the declaration in the 'STYLE' attribute will override the one in the 'STYLE' element because of cascading rule number 5.

The UA may choose to honor other stylistic HTML attributes, for example 'ALIGN'. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 1. The rules are assumed to be at the start of the author style sheet and may be overridden by subsequent style sheet rules. In a transition phase, this policy will make it easier for stylistic attributes to coexist with style sheets.

inheritance

background color

is never inherited.

therefore, even though we declare:

BLOCKQUOTE {background-color: white}

we would have to declare the following for the paras:

BLOCKQUOTE P { background-color: white}

However, if you specify that text in headings should be red, emphasized text in the headings will also be red.

Properties

the display property
background
fonts
text

the display property

Display allows you to specify what category of object an element belongs to: is it a block element, like a heading or paragraph; an inline element, like emphasis or anchors; or a list-item block element, like LI. An additional category is none, which indicates that the content of the element should not be displayed at all. Also, floating elements (elements with a 'float' value other than 'none') are considered to be block-level elements.

CSS1 assumes a simple box-oriented formatting model where each formatted element results in one or more rectangular boxes. (Elements that have a 'display' value of 'none' are not formatted and will therefore not result in a box.) All boxes have a core content area with optional surrounding padding, border and margin areas. click here to see the w3 specification.

Boxes

The formatting model suggested by CSS1 is one of concentric rectangles. Each element has a margin, inside the margin is an optional border, inside the border is optional padding, and inside the padding is the actual formatted content of the element. The box properties allow you to specify the nature of the rectangles and determine how the content of the element is formatted to fit in the space provided.

Click here to see the w3 specification.

margin margin-bottom, margin-left margin-right	Determine the size of the top, bottom, left, and right margins. Setting marginadjusts all of the margins simultaneously.
padding padding-bottom, padding-left padding-right	Adjusts the amount of padding on the top, bottom, left, and right sides of the element. Setting padding adjusts all of them simultaneously.
border border-bottom, border-left border-right	Selects the nature of the border on the top, bottom, left, and right sides of the element. Setting border adjusts all of borders simultaneously. You can specify the size, color, and style of the border.
width height	Identifies the width and height of the rectangle that contains the formatted content. Images should be scaled to the specified size, if necessary.
float	Identifies an element that should float to the left or right of a flow of text, allowing the text to flow around it.
clear	Specifies where floating elements may occur with respect to the element. For example, specifying clear: left indicates that there may be no floating elements to the left of the element; this will force the element to start below an image floating on the left side of the display, for example.

The following is a list of HTML elements which appear to support the BLOCK display property inherently:

td... so, for example, using a class attribute to set background-color only works on this element
table and tr does not support it

list-style property

List-style influences the selection of numbers or bullets for lists. In addition to selecting one of the built-in enumeration or bullet styles, you can specify an image for use as the bullet character. You can also influence the position of the list mark with respect to the flow of the text. An outsidelist mark occurs to the left of the entire list item, whereas text wraps under an inside mark.

inline elements

According to the w3c recommendations, an element which does not have a line break before and after (e.g. 'STRONG' in HTML) is an inline element. Elements that are not formatted as block-level elements are inline elements. An inline element can share line space with other elements. Consider this example:

Several emphasized words appear.

The 'P' element is normally block-level, while 'EM' and 'STRONG' are inline elements. If the 'P' element is wide enough to format the whole element on one line, there will be two inline elements on the line: Several emphasized words appear. If there is not enough room on one line an inline element will be split into several boxes:

Several emphasized words appear here.

The above example may be formatted as: 
Several emphasized
words appear here.

If the inline element has margins, borders, padding or text decorations 
attached, these will have no effect where the element is broken: 
         ----------
Several |emphasized
         ----------
-----
words| appear here.
-----

white space

White-space identifies how the line breaking of an element is to be accomplished. Possible values are normal, where white space serves merely to delimit elements that are formatted according to the alignment of the surrounding element; pre, where all white space is significant; and nowrapwhere white space serves primarily as a delimiter, but no wrapping is done except where
elements occur.

Foreground and Background Colors and Background Images

There are two properties for specifying colors: color and background. The color property controls the foreground color of an element. Usually this is the color of the text of an element. Colors may be identified either by name or by RGB value. The background property controls the background color or texture of an element. When an image is specified for use as a texture, its position, scrolling aspect, and repeatability can be controlled.

Fonts Properties

There are five properties that control which fonts are used:

font-family	Identifies the font family, or typeface, to use. A series of names may be requested; the first available font will be used. There are five classes of "generic" fonts that may be specified as a last resort.
font-style	These are variants within the font families: normal, italic, or oblique.
font-weight	light, bold
font-variant	Identifies another variation on the face--either normal or small-caps in CSS1.
font-size	The size of the face. Font size may be specified in absolute units or relative to the "current" size.
font-weight	The weight or boldness of the font, specified with either a keyword (bold or bolder, for example) or as a member of the ordered series 100, 200, 300, . . . , 900, where higher numbers are correspondingly darker.

Font classes

serif (Times Roman, Palatino, Garamond). A serif is a decorative appendage.
sans-serif (Helvetica, Avant-Garde) whose ends have no adornments
monospace for fixed-width fonts (Courier). Used to represent computer data.
cursive for swash faces (Zapf Chancery). calligraphy. hand-writing.
fantasy for other hard-to-classify faces (Grunge, Western)

font-size

xml sizes
length units
percentage units

xml sizes

xx-small
x-small
small
medium
large
x-large
xx-large

Length units

The format of a length value is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a number (with or without a decimal point) immediately followed by a unit identifier (a two-letter abbreviation). After a '0' number, the unit identifier is optional. Some properties allow negative length units, but this may complicate the formatting model and there may be implementation-specific limits. If a negative length value cannot be supported, it should be clipped to the nearest value that can be supported.

There are two types of length units: relative and absolute. Relative units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g. from a computer display to a laser printer). Percentage units (described below) and keyword values (e.g. 'x-large') offer similar advantages. These relative units are supported:

H1 { margin: 0.5em } /* ems, the height of the element's font */ H1 { margin: 1ex } /* x-height, ~ the height of the letter 'x' */ P { font-size: 12px } /* pixels, relative to canvas */

The relative units 'em' and 'ex' are relative to the font size of the element itself. The only exception to this rule in CSS1 is the 'font-size' property where 'em' and 'ex' values refer to the font size of the parent element. Pixel units, as used in the last rule, are relative to the resolution of the canvas, i.e. most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the UA should rescale pixel values. The suggested reference pixel is the visual angle of one pixel on a device with a pixel density of 90dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is about 0.0227 degrees.

Child elements inherit the computed value, not the relative value:

BODY { font-size: 12pt; text-indent: 3em; /* i.e. 36pt */ } H1 { font-size: 15pt }

In the example above, the 'text-indent' value of 'H1' elements will be 36pt, not 45pt.

Absolute length units are only useful when the physical properties of the output medium are known. These absolute units are supported:

H1 { margin: 0.5in } /* inches, 1in = 2.54cm */ H2 { line-height: 3cm } /* centimeters */ H3 { word-spacing: 4mm } /* millimeters */ H4 { font-size: 12pt } /* points, 1pt = 1/72 in */ H4 { font-size: 1pc } /* picas, 1pc = 12pt */

In cases where the specified length cannot be supported, UAs should try to approximate. For all CSS1 properties, further computations and inheritance should be based on the approximated value.

Percentage units

The format of a percentage value is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a number (with or without a decimal point) immediately followed by '%'.

Percentage values are always relative to another value, for example a length unit. Each property that allows percentage units also defines what value the percentage value refer to. Most often this is the font size of the element itself:

P { line-height: 120% } /* 120% of the element's 'font-size' */

In all inherited CSS1 properties, if the value is specified as a percentage, child elements inherit the resultant value, not the percentage value.

Text Properties

word-spacing	Modifies the default inter-word spacing.
letter-spacing	Modifies the default inter-letter spacing.
text-decoration	Selects underlining, overlining, link-through, or blink attributes (with additional, unspecified decorations anticipated from vendors).
vertical-align	Adjusts the vertical alignment of an element.
text-transform	Shifts text to uppercase or lowercase.
text-align	Specifies left, right, center, or justified alignment. If 'justify' is not supported, the UA will supply a replacement.
text-indent	Determines the amount of indentation on the first line of a block of text.
line-height	Specifies the distance between the baselines of consecutive lines of text.