Cascading Style Sheets (CSS) is the W3C standard for the visual presentation of Web pages. The basic idea is that CSS provides a mechanism to specify the appearance, position, and behavior of all elements on an HTML page. Furthermore, these definitions can be selectively applied to elements in a group of pages, allowing you to change the appearance of all those elements in a single place -- the style sheet. This also has the effect of reducing the size of your HTML pages, since you’re able to drop a lot of redundant markup. In the olden days, page layouts were created by forcing elements into cells of tables, usually nested in intricate ways. Table-based layouts add a large amount of markup HTML to your pages, and can easily obscure the underlying structure of the page. We won't be using tables for layout in this class!

If you want to explore what is possible with style sheets, check out the CSS Zen Garden, where there are dozens of pages with the exact same content but different style sheets. You will be amazed at the variety!

Three Ways to Apply Styles:

• External Style Sheet: styles can be listed in an external file, allowing those styles to be changed in one place for all files that use that style file. You can use either the @import directive or the <link> tage to load the CSS file.
  
  <link href="CSS/CIS86.css" rel="stylesheet" type="text/css" />
  
  
• Embedded Style Sheet: a style sheet can be embedded in the HEAD of a document using the style element.
  
  <style type="text/css">
  .topbox { border:3px solid #ffffcc; color:#0066cc; }
  </style>
  
  
• Inline Styles: applied to an individual element via the style attribute.
  
  <h2 style="margin-left:20px; font-size:150%;">An example header.</h2>
  
  

The Cascade part of CSS is the mechanism by which conflicting style directives are sorted out. This can be a most complex subject, but the gist of it is that usually the definition that takes precedence is the closest definition to the place in the source file where it is being used.

Here are four things you will find in CSS files or specifications. All declaration blocks can span multiple lines.

1. Comments, as delimited by /* and */. These can be multi-line.
2. HTML tags, followed by a declaration block.
3. Class names (a dot followed by a label), followed by a declaration block.
4. IDs (a '#' followed by a label), followed by a declaration block.

Structure of Style Rules

• Every style rule has two parts: the selector and the declaration block.
• The selector specifies which parts of the document should have the style rule applied, by assigning style information to specific elements or groups of elements. This is usually one of three things:
  • Generic selectors are HTML tags, allowing you to change the appearance of all instances of specific tags.
  • Class applies style to all elements of that class.
  • ID applies style to the single element defined with that ID (name).
• The declaration block contains one or more declarations, and is always enclosed in curly braces. Each declaration contains two parts, separated by a colon: a CSS property and the associated value. Declarations are separated by semicolons.
• Examples:     
  • body { color: #ffffff; background-color: #000000; }
  • img { border: 3px solid #cccccc; }
  • .question {font-color: #ff0000; font-weight: bold; }
  • #menubar {position: absolute; top: 100px; left: 0px; width: 180px; }
    

For more information about CSS properties, see the QuickProject textbook starting on page 106.

The Box Model

Many elements in HTML create block-level elements -- their presence defines a box. Anything that is a box can be styled with CSS. Boxes have specific properties relating to the rectangular box: borders, margins, padding. For cases where there isn't a box defined by existing HTML elements, you can create boxes in CSS using the DIV and SPAN tags. Spans are used where you want to apply styling to a relatively small element in a single place, such as turning the text color to green for a phrase. A DIV defines a box with no attributes initially, and you apply styling to the contents of the DIV box.

Normally, when you specify a width for a component, this does not include padding or borders. Some versions of Internet Explorer instead interpret the width as being the combination of the content, the padding, and the border.

Arcane Rules about Structure of Style Rules

• Every style rule has two parts: the selector and the declaration block.
• The selector specifies which parts of the document should have the style rule applied, by assigning style information to specific elements or groups of elements.
  • Generic selectors are HTML tags, allowing you to change the appearance of all instances of specific tags.
  • Universal selectors let you apply style rules to all elements.
  • Child applies style to the element that is a direct descendant of the parent element.
  • Descendant applies style to all children recursively.
  • Class applies style to all elements of that class.
  • ID applies style to the single element defined with that ID (name).
• The declaration block contains one or more declarations, and is always enclosed in curly braces. Each declaration contains two parts, separated by a colon: a CSS property and the associated value. Declarations are separated by semicolons.
• Examples:
  • body { color: #ffffff; background-color: #000000; }
  • img { border: 3px solid #cccccc; }
  • .question {font-color: #ff0000; font-weight: bold; }
  • #menubar {position: absolute; top: 100px; left: 0px; width: 180px; }
    

Resolving Conflicts in Style Declarations (the Cascade):

Since style directives can be applied in many ways in a single file, CSS uses the cascade to resolve any conflicts between style definitions.

• The source of the style sheet determines its importance, in this order: the Web browser's default style sheet is overridden by the Web designer's style sheet, which is overridden by the user's style sheet (in the unlikely event they user specifies a private style sheet). As a designer, you can add the "!important" declaration to a rule to give greater weight to a rule.
• Specific selectors are given greater weight than general selectors. Here are the types of selectors in order of weight (least to most): Universal (applies to all elements) > element identifiers (applies to all elements of a certain type, such as table) > class identifiers (all elements of class "foo") > ID identifiers (the element named "menubar") > inline styles (make this thing red right here). For example, setting the background color for a paragraph named "overview" will have greater weight than a general assignment of background color to the page.
• If selectors have identical characteristics, then the selector that appears last in the style sheet file will take precedence. Selectors defined in an external file are considered to come before any style defined within the page (whether embedded or inline).