Style Sheets

Cascading Style Sheets!

Allow HTML authors to specify a common set of styles and spacing instructions for elements on
a page.

For example if web site with 5 different pages, might use style sheets to specify things like:

Common size for headers, default font type, background images or colors, margin sizes and other page styles.

The Technology that has advantages:

Control - Offers greater page layout controls for all pages at a site. E.g., can specify margin, indents, line spacing, element positioning, font size, etc.
Style Separate From Document Structure
Smaller Size? - Can decrease document size - E.g., (reducing the number of FONT tags)
Maintainability - Easier site maintenance

Disadvantages:

Browser Support - Not supported in browsers earlier than I.E. 3.0 or Netscape 4.0.
Browser Implementation - IE and Netscape implement the standard differently.

Probably best used for intranets where can control browser types.

Also would want to include a script that detects the version of browser (See JavaScript).

Types of Style Sheets

Style sheets can be used in 3 different ways:

External Styles - Collect the style information in an external file and link them into all the needed files at your site.

For example, would provide a file that has all style information (like color of headers) and include or link that file into all pages of your site.

Would specify the style for a particular line of text in the document.

Embedded Styles - Embed the style sheet on the top of the document.

For example, would specify the default color for all items in this web page.

Inline Styles - Put the style information in-line the text of the document.

Would specify the style for a particular line of text in the document. (highest precedence).

Using Style Sheets

Here is an example web page with a style sheet.

This type of usage is called embedded style sheet since it is embedded in the top part of the document.

Here is the Style Sheet Part:

        <STYLE TYPE="text/css">
            H1 {Color: red;
                font-size: 24pt; }
            H2 { Color: green;
                 font-size: 12pt; }
        </STYLE>

You should notice:

Style information can be embedded at the top of HTML documents.
Use of <style> ... </style> tags.
General syntax is selector:{property:value} where

selector - identifies the element to be affected. Includes things like H1, H2, P, EM, LI EM.
property:value - identifies a stylistic property to be defined with some value.

Includes things like color: red, font-site: 12pt, font-face Verdana.

Can also group selectors on 1 line with common {property:values} E.g.,

H1, H2, P { color: blue }

Linked or External Style Sheets
One of the most powerful way to use CSS is to use external file that has all the style information

Link that file to multiple html documents that want that "style"
Here is an example Click here
The magic line to include the link tag in the <head>...</head> is:

<LINK REL="STYLESHEET" HREF="stylesheet.css" TYPE="text/css">

Here is the external file called stylesheet.css

        H1 { Color: red;
            font-size: 36pt; }
        H2 { Color: green;
             font-size: 24pt; }
       P {margin-left: 44pt; }

Selectors

Type Selectors - Uses an HTML element.

For example, H1, H2, P

H1 {Color: red; font-size: 24pt;

H2 { Color: green; font-size: 12pt; }

EM { Color: red; } - All emphasized text red.

H1, H2 {Color: green}

Click Here for example. Here is the external style file:

                H1 { Color: red; font-size: 36pt; }
                H2 { Color: green; font-size: 24pt; }
                 P {margin-left: 44pt; }
             EM, I { color: green; }
                B { color: red; font-size: 18pt; }

Selectors - Class selectors

Class Selector - Can define and use a Class attribute as a short hand way to specify class information.

<H1 CLASS="important">Attention</H1> - Use style class defn called important.

H1.important {color.red} -

Would make any reference H1 red.

Click here - for an example. Here is the content of the stylesheet.

EM, I { color: green; }

B { color: red; font-size: 18pt; }

H1.important {font: 36pt "Comic Sans"; Color: Blue}
H1.normal {font: 24pt "Arial"; Color: red}

Can also create a generalize class that can be included anywhere and is not tag specific. Use the DIV command. E.g., inside the stylesheet:
DIV.smallprint { font-size: 8pt; color: teal }

Then inside HTML document could do:
<DIV CLASS="smallprint">

For example click here.

Selectors - Special Built-in Classes

There is a set of classes that are special built-in. One set is used within the the <A> tag.

For example here is a style sheet:
                     A:link { color: red }
                     A:visited { color: maroon }
                     A:active { color: lime }
Here is an example that uses it.

Another Embedded Style Sheet Example

Here is another more detailed example embedded style sheet for a body of a document.
Here is the main portion:

BODY {font-size: 14pt;

font-family: "Arial";

Color: blue;

background: url(back.gif);

line-height: 16pt;

margin-left: 10pt;

margin-right: 10pt;

}

Pt is a measurement, there are 72 points in an inch. (you can use pt, cm, px)

Properties - font-family

Here are some properties that are useful for the basic type-related selectors

font-family - specifies a family of fonts to use

Values: list of fonts to use
Applies to: all elements
Example:

P { font-family: Veranda, sans-serif }

Notes:

There are 5 possible font-families it is like specifying a generic name. It is a good idea to make one of these last in the list

sans-serif (e.g., halvetica or arial)
monospaces (e.g., courier or new courier)
cursive (e.g., Zapf-chancery)
serif (e.g., Times)
fantasy (e.g., western, impact, or some other display oriented font)

Properties - font-style
Here are some properties that are useful for the basic type-related selectors

font-style - specifies between the normal (default), italic, and or oblique font-face within a font-family. (oblique is slanted text, italic is slanted with more cursive characters.)

Values: normal | italic | oblique
Applies to: all elements
Example:

H1 { font-style: italic }

Notes:

Bold is part of the font-weight not font-style.

Properties - font-weight

Here are some properties that are useful for the basic type-related selectors

font-weight - specifies the weight or boldness of the font to use.

Values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Applies to: all elements
Example:

STRONG { font-weight: 700 }

Notes:

Allows either a descriptive tag (normal, bold, bolder or lighter) or a number. Normal is the default = 400. Typical bold is 700. Not all numbers may be supported within a particular font-family and browser have inconsistent support of this feature.

Properties - font-size

font-size - specifies a family of fonts to use

Values: absolute size | relative size | length percentage
Applies to: all elements

As can be seen from above can be specified as 1 of 3 above:

Absolute size

Values: xx-small | x-small | small | medium | large | x-large | xx-large
Example: H1 { font-size: x-large }
Notes: These are descriptive terms that reference a table of sizes kept in the browser.

Relative Sizes

Values: larger | smaller
Example: H1 { font-size: larger }
Notes: specifies size relative to the parent object.

Length Sizes

Values: number + em | ex | px | pc | mm | cm | in
Example: H1 { font-size: 24pt }
Notes: Specify size using the above length units:

Code	UNIT	Description
px	pixel	Number of pixels relative to the monitor resolution
pt	point	A unit of measuring type (from publishing) equal to 72 pts = 1 inch.
pc	Pica	A unit of measurement from publishing. 1 = pts or 1/6 inch.
em	EM	A relative measurement equal the with of the capital M in the current font.
ex	Ex	A relative measurement for the height of the width of the letter X in the current font.
in	Inches	Measures in inches
mm	millimeter	measures in millimeters
cm	centimeters	measures in centimeters.

Properties - font-color

color - specifies the color of the element.

Values: color_name | RGB Hex Value | RGB New Values
Applies to: all element
Notes: As can be seen from above, specify 1 or 3 ways

color_name: Use 1 of the 16 color names.

values - aqua, gray, navy, silver, ...
Example:

STRONG { font-style: italic; color: purple }

RGB values: Use hex value that fill in the RGB values.

values - 000000, ..., FFFFFF
Example:

STRONG { font-style: italic; color: #FF00FF }

RGB New Values

values - rgb(255,0, 255) or rgb(100%, 0%, 100%)
Example:

STRONG { font-style: italic; color: rgb(255, 0, 255) }
STRONG { font-style: italic; color: rgb( 100%, 0, 100%) }

Properties - line-height

cline-height - sets height of lines.

Values: normal | number | length | percentage
Applies to: all element
Notes: As can be seen from above, specify 1 or 3 ways
Examples:

P ( line-height: 1.2 }
P { line-height: 1.2em }
P { line-height: 120% }

Properties - text-transformation

text-transformation - transforms text to upper or lower case.

Values: none | capitalize | lowercase | uppercase
Applies to: all element
Notes: As can be seen from above, specify 1 or 4 ways

none - displays the elements as they are typed.
capitalize - Displays the first letter of every word in uppercase
lowercase - displays the whole element in lowercase
uppercase - displays the whole element in uppercase
Examples:

P { text-transform: capitalize }
P { text-transform: lowercase }

P { text-transform: uppercase }

Properties - text-indent

text-indent - specifies the amount of indentation from the far left.

Values: length | percentage
Applies to: block level elements
Notes: As can be seen from above, specify length or percent of normal text

Examples:

P.first { text-indent: 3em }

Background Properties -

background-color - specify the color or RGB value for background color.

Values: color name | RGB value
Applies to: all element
Notes: Sets the background color of the element.

Examples:

P.warning { background-color: red }
STRONG { font-weight: 900; background-color: silver }

Background Properties -

background-image - specify the background image for an element.

Values: URL
Applies to: all element
Notes: Sets the background image for element.

Examples:

BODY { background-image: URL(back.gif) }

A large Example -

Here is a CSS used in the following example:

                                P.first { text-indent: 12pt }
                                H1.title { text-transform: uppercase }
                                H2 { font-size: 33pt }
                                H1 { color: red }
                                EM { font-size: 18pt; font-style: Times, serif; color: FF00FF }
                                STRONG { font-weight: 900; background-color: silver }
                                BODY { background-color: yellow }