Style Sheets

Cascading Style Sheets

Cascading Style Sheets, or CSS, are used to control layout and presentation of HTML documents. They allow more precise control over page elements than straight HTML, for example typography and positioning.

Style sheets are intended to separate presentation from content, that is HTML structures the content while CSS determines the display.
They provide control over the presentation of documents — font information, alignment, colors, etc.
Style information can be specified for individual elements or groups of elements.
Style information may be specified in an HTML document or in external style sheets that can be shared by many documents.
Cascading refers to the use of multiple style sheets in a single document, specifically the passing down of style information from higher to lower level style sheets.

Stylesheet example

A Little History

CSS1: The first level of W3C style sheet specification (1996) includes typeface, type size, leading, margins, kerning.

CSS2: The second level of W3C style sheet specification (1998) includes positioning and layering.

CSS3: Currently under development, this third level extends the style sheet specification with new selectors, fancy borders and backgrounds, vertical text, user interaction, speech and more.

W3C style sheet specs

Benefits and Problems

Standard HTML has limited abilities to format text.
The <FONT> element can be used to format text, but it is limited (e.g. cannot specify text size in pixels or leading).
Images can be used for special text effects but this method doesn't allow highlighting, can cause printing problems and can't be searched.
HTML is designed for specifying the structure of a document, but it is often used to define presentation. Style sheets simplify HTML markup and largely relieve HTML of the responsibilities of presentation.
Style sheets improve consistency and management of web sites.
They improve legibility by giving more flexible and accurate control over appearance of text.
They make updating web sites easier (e.g. can redefine all elements with one instruction).
Style sheets allow for more efficient code.
Systems must have specified fonts installed.
Browsers have inconsistent support for style sheets.
Only Netscape 4.0 and later and Explorer 3.0 and later fully support style sheets.
Netscape 6.0 and Explorer 5.5 support most of CSS1 and some of CSS2 specifications.

Style Sheet Syntax

Style sheets are composed of rules that define how elements should be displayed. Rules contain two parts: a selector and declarations (property and value). The selector identifies the HTML element and the declaration specifies the style to be applied to it.

selector {property: value}

The following rule specifies that Heading 2 elements are red and sans serif:

H2 {color: red; font-family: sans-serif}

The following rule specifies text color and font for the page (BODY):

BODY {color: black; font-family: Verdana, Arial, Helvetica}

The selector can be any HTML element (e.g. H2), a pseudo-class (e.g. A:LINK) or a group of elements (e.g. H1, H2, H3). Declarations can contain several property-value rules(e.g. color: red).

More examples: following are a few more style definitions


  H1 {color: #FF00FF}
  BODY {color: #000099; background-color: #CCCCCC}
  
P {text-align: justify; text-indent: 20pt}
  H4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; 
    color: #330033}
  A:LINK {color: #CC0033; text-decoration: none}
  A:VISITED {color: cyan}
  
BLOCKQUOTE {font-family: Georgia, Times New Roman, serif; font-style: italic; 
  text-decoration: blink; margin-left: 20px}
  H1, H2, H3 {color: #FF00FF}

Classes

Classes are named rules that can be selectively applied to any element or text. A class can be applied to a tag, lines of text, individual words or characters.

The following defines a class named "redtext" that can be applied to any tag:

<STYLE TYPE="text/css">  <STYLE>

It is applied to an HTML element using the CLASS attribute:


  
<P CLASS="redtext">some red text</P>

It can also be applied to a string of text with the <SPAN> element:

 
  <SPAN CLASS="redtext>some red text and some more red text</SPAN>

Classes can also be defined for specific tags. The following defines two classes for the <P> tag:

 <STYLE TYPE="text/css">

<!-- 

p.quote {font-size: 10pt; font-style: italic} 

p.indent {text-indent: 20px} 

-->

</STYLE>

They are applied to the specified element using the CLASS attribute:

<P CLASS="indent">a paragraph with a 20 pixel indent</P>

Definitions for several more classes. These definitions (within the <STYLE> tags) are placed within the document heading:

 
<STYLE TYPE="text/css">

  <!--

  .sans-seriftext {font-family: sans-serif}

  .reditalictext {font-style: italic; color: red}

  .warning {font-size: 16pt; color: yellow; font-style: italic}

  H1.blue {color: blue}

  H1.red {color: red}

  -->

  <STYLE>

Applying them:

 
<P CLASS="reditalic">

  paragraph of text

  </P>
<H1 CLASS="sans-seriftext">Heading Text</H1>
<DIV CLASS="warning">

  block of text

  </DIV>
<H1 CLASS="blue">A blue heading.</H1>
<H1 CLASS="red">A red heading.</H1>

Using Style Sheets

There are three methods of using style sheets in an HTML document

Inline Style Sheets: placed as attribute inside tag; affects specific HTML element
Embedded Style Sheets: included in document header; affects entire document
External Style Sheets: contained in separate file; can affect multiple documents

Inline Style Sheets

Inline style sheets affect specific HTML elements. They are similar to using presentation elements such as FONT. They are used as an attribute within a tag, using the STYLE attribute. Inline style sheets provide more control than standard HTML but affect only individual elements.

The following shows an inline style sheet and its HTML equivalent:


  <H2 STYLE="text-align: right">Heading text</H2>
  <H2 align="right">Heading text</H2>

Another example:


  
<P STYLE="font-family: Arial, Helvetica, sans-serif; color: blue">

    ... paragraph text ...

    </P>
  <P>

    <FONT FACE="Arial, Helvetica, sans-serif" COLOR="blue">

    ... paragraph text ...

    </FONT>

    </P>

Inline style sheets can be used with DIV or SPAN to affect a block or section of a document

 
  <DIV STYLE="text-align: justify; font-family: sans-serif">

    -------------

    ------------- 

    </DIV>
  <SPAN STYLE="font-style: italic; color: green">a line of 
    text</SPAN>

Embedded Style Sheets

Embedded or local style sheets are included in the document header and provide convenient control over an entire document. They affect all tags in the document, unless inline style sheet overrides them. They are defined with the <STYLE> element.

Following is an example of an embedded style sheet (note the content is placed within HTML comment tags for browsers that do not support style sheets; comments in the style sheet are delineated by /* and */ brackets):


  <HEAD>
  <STYLE TYPE="text/css">

    <!--

    /* body and heading style sheets */

    BODY {background-color: #000000; color: #FFFFFF}

    H1 {color: red; font-weight: bold}

    H2 {color: green; font-size: 16pt}

    H3 {color: blue; font-style: italic} 

    -->

    </STYLE>
   <HEAD>

Embedded dogstyle

External Style Sheets

External or imported style sheets are placed in separate files and linked to HTML documents. External style sheets are simply text files with a .css extension, they do not contain HTML tags. They can be shared by documents in a site enabling easy site maintenance. External style sheets provide the most powerful way to control document presentation. External styles affect all tags in the document, unless embedded or inline style sheets overrides them.

Following is an example of an external style sheet (this is the entire file; note it is similar to an embedded style sheet except it does not include the <STYLE> tag:


  /* Main Frame Style Sheet */ 

    <!-- 

    BODY {background-color: #CCCCCC; font-family: Arial, Helvetica, sans-serif; 
    

    background-image: url(/backgroundgradient.gif); background-repeat: repeat-y} 
    

    a:link {color: #663300} 

    a:active {color: #FFFFFF} 

    a:visited {color: #990099} 

    -->

An external style sheet is attached to a document by linking or importing it:

The most common method is to create a link to the external style sheet. Several style sheets can be linked. The <LINK> element is placed within the header section.


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

An external style sheet can also be incorporated into an embedded style sheet with @import. This method also allows several external style sheets to be used.

 
  <STYLE TYPE="text/css">

    <!-- 

    @import url(stylesheetname.css);

  H1 {color: green; font-size: 16pt}       /* override 
  imported style */

    -->

    </STYLE>

Linked Style Sheet

Linked dogstyle

dogsheet

Cascading Style Sheets

More than one style sheet (and more than one type of style sheets) can be used in the same document. It is possible for different style sheets to affect the same elements. Cascading refers to the rules (or inheritance) used to determine the order in which style sheets are applied. In general precedence is given to inline over embedded over imported over linked. Rules are applied in order (a later rule will override a previous rule). A more specific setting takes precedence over a more general one (e.g. a <P> rule will override a <BODY> rule).

CSS Properties

Following are some examples of CSS properties. Multiple properties are separated by semi-colons.

Type: properties that control the display (format) of type


  font-family: "Arial, Helvetica, sans-serif"
  font-family: "Times New Roman, Times, serif"
  font-style: italic
  font-weight: 500    /* weights can be 100, 200 ... 900 with 
    400 normal and 700 bold*/
  
font-size: 16pt     /* points are the traditional 
  method of specifying text size - 72pt = 1 inch */
  
font-size: 20px     /* pixels can be used for greater 
  control and consistency */
  
font-size: 2em      /* em is relative unit based on 
  size of type - 2em makes text twice as large */
  
line-height: 150%   /* vertical line space, known as leading 
  */ 
  line-height: 10px/14px
  color: #RRGGBB
  letter-spacing: 2pt
  text-align: justify
  text-indent: 10px
  text-decoration: blink
  font: 12px/18px, italic, verdana, geneva, arial, helvetica, sans-serif       /* 
    combining properties in one rule */

Background: control background color and images


  background-color: #RRGGBB
  background-image: url(image_file.gif)
  background-repeat: repeat-y
  backround-repeat: repeat-x

Lists: control display of list elements


  list-style-type: square
  list-style-image: url(image_file.gif)       /* 
    uses image file for bullet icon */

horiz. list

Box: control layout around element, including padding, border and margin


  padding: 2px;
  border-width: 1px
  border-color: magenta
   margin-left: 15px
  margin-top: 10px
 margin: 10pt 15pt 10pt 15pt

Positioning: control placement of elements in three dimensions


  height: 100px
  width: 200px
  
position: relative    /* values are relative, absolute, static */
  
left: 20px
z-index: 2    /* controls overlapping of elements */

Positioning example