Cascading Style Sheets (CSS)
History: CSS was proposed by Håkon Wium Lie in 1994 and he was incharge of its development at the World Wide Consortium (W3C) until 1999
  • CSS1 (released in 1996)
  • CSS2 (released in 1998)
    Important improvements were made to Font Selection, Positioning, Cursors and now offers many new options for accessibility and use across various user agents.
    Automated content allows developers to force the user agent to display specific content elements as well as the layout, look, and feel. Also there is support for special cursors in CSS2 as well as dynamic outlining.
4 ways to apply a CSS rule or set of CSS rules to a web page
  Examples
Inline direct application to an <tag> <p style="color: #666;">color this</p>
Embedded

place css code directly onto a web document between the <head> and </head> tags
(local affect)

<style type="text/css">
<!--
   p {color: #666;}
//-->
</style>

Linked reference a "linked" css document on a web document between the <head> and </head> tags
(global affect)
<link rel="stylesheet" type="text/css" href="mystylesheet.css" media="screen" />
@import reference an "@import" css document in a web document between the <head> and </head> tags
(global affect)
<style type="text/css" media="screen">@import url(notforNNx.css);</style>

Rule = Selector { Declaration }

  • Selector = element (tag)
  • Declaration = { property:value; }

The Box Model box model

A description of how elements / objects are rendered via CSS through many properties.

An element such as <div> can carry several properties related to the box model. For example:

div {padding: 26px; margin: 55px; border: 1px solid #000000;}

      • padding deals with the inside of the element - inside the border
      • margin specifies the area around the border - outside the border

Selectors ~ A way of joining styles to a specific element or a group of elements

Selector Syntax Examples
generic
typically an html or xhtml element
a

p {font-color: #000;}
h3 {font-style: italic;}

descendant
applies style to elements that are a descendent of another element
a b c div p blockquote{font-weight: bold;}
p strong {font-weight: normal;}
universal
(not well supported)

applies style rules to all elements
* * {color: #fc0;}
p * li {display: none;}
child
applies style to the element that is a direct descendent of the parent element
a > b p > blockquote {color: #666;}
div > p {font-weight: bold;}
adjacent-sibling
similar to a descendant selector, but applies only to the immediate element
a + b div p + blockquote {color: #666;}
h1 + p {font-weight: bold;}
attribute
a type of selector that uses the values of an element's attributes to associate

a[attr]
a[attr="value"]
a[attr~="value"]
a[attr!="value"]

a[link] {color: #666;}
a[link="http://www.cssbook.com/"] {font-weight: bold;}
img[title~="Chabon"] {padding: 10px;}
img[title!="Author"] {border: 10px solid #666;}

class
style that can be applied for elements that make use of the class attribute
a.class
.class
p.summary {font-weight: bold;}
.bammo {padding: 30px;}

id
applies a style to any element that makes use of the if attribute

a#id
#id
p#header {font-size: 2em;}
#footer {color: #666;}

SHORTHAND Terms:

Text style
Text layout
Background
Border
Margin
Padding
Page layout
Element type
User interface
The Cascading Style Sheets recommendation divides properties into a number of categories. StyleMaster [SM] won't follow these categories rigorously, but rather groups the properties in similar, but differently named categories. The categories of property SM uses are linked and listed to the right,
shorthand terms included properties
background

background-attachment
backgrond-color
background-image
background-position
background-repeat

border border-color
border-style
border-width
font

font-family
font-size
font-style
font-weight
font-variant
line-height

list-style list-style-image
list-style-position
list-style-type
margin margin-top
margin-right
margin-bottom
margin-left
outline outline-color
outline-style
outline-width
padding padding-top
padding-right
padding-bottom
padding-left

Inheritance

The DOC Tree and how your browser reads the box model of nearly every object on a web page document: http://css.maxdesign.com.au/selectutorial/document_tree.htm and http://www.westciv.com/style_master/academy/css_tutorial/
SELECTORS ~ A way of joining styles to a specific element or a group of element

CSS1 introduced 7 distinct kinds of selector ...

  1. HTML element/type selectors ~ block, inline, list
     
  2. .class selectors
     
  3. #ID selectors
     
  4. contextual selectors (in CSS2 these are now referred to as Descendent Selectors)
     
  5. link pseudo class selectors
     
  6. pseudo element selectors
     
  7. selector group

... CSS2 amended some of these a little, adding these selectors

  1. dynamic pseudo class selectors
     
  2. language pseudo class selectors
     
  3. child selectors
     
  4. first child selectors
     
  5. adjacent selectors
     
  6. attribute selectors
     
  7. row and column selector
<class> versus <id> <div> versus <span>

The CLASS attribute was specifically designed to allow authors to assign styles to elements.

The ID attribute, however, is intended solely to provide a unique identifier.

The syntax difference:

  • use a . for class
  • use a # symbol for id

Class Rule: You can't start your class names with a digit or a dash.

A good practice is to name classes according to their function rather than their appearance. The class in the above example could have been named red, but this name would become meaningless if the author decided to change the style of the class to a different color.


Each ID attribute must have a unique value over the document.

ID Rules: The value must be an initial letter followed by letters, numbers, digits or hyphens. The letters are restricted to A-Z and a-z. Note also the addition of a hash (#) in the ID style definition.
ID's enable you to define a unique style for an element. In this case you could embed a style definition as follows:

<id> is used to mark a single instance in a document, much like the name attribute. In fact, the name attribute has been deprecated in favor of the <id> element except in forms, where name is still used to build name="value" pairs for passing data to the server

If you use name and are planning to use XHTML, you need to include the identical markup value for the name and <id> attributes in your markup. For example:
<a href="blah.html" name="same" id="same">Blah</a>

Example of using an ID as a "unique" (used only once on a page) copyright tag line:

<head>
<style type="text/css">
<!--
#copyright {font-style:italic;
font-size:smaller; color:blue;}
-->
</style>
</head>

<p id="copyright">&copy;1997-2004 Sara Newman</p>

The SPAN element was introduced into HTML to allow authors to give style that could not be attached to a structural HTML element.

<span> may be used as a selector in a style sheet, and it also accepts the STYLE, CLASS, and ID attributes, at least one of which must be used for the tag to have any affect. You must also include the closing tag </span>, as one would with any inline element.

The DIV element is similar to the SPAN element in function, with the main difference being that <div> (short for 'division') is a block-level element.

DIV may contain paragraphs, headings, tables, and even other divisions. This makes DIV ideal for marking different sections of the page, such as chapters, abstracts, or notes.

As with SPAN, the section of the page is defined using the <div></div> tags with a STYLE, CLASS, or ID attribute.

The following example demonstrates how to change the background color of a heading and paragraph section in a document using a <div> and a <span>.

<p>This paragraph has the normal background colour.</p>
<div style="background-color:wheat">
<h3>
This heading has a wheat-coloured background.</h3>
<p>
So does this paragraph,<span style="background-color:aqua">apart from this bit which is aqua</span>.</p>
</div>
<p>Now we're back to normal.</p>

This paragraph has the normal background colour.

This heading has a wheat-coloured background.

So does this paragraph,apart from this bit which is aqua.

Now we're back to normal.

AVOID these CSS1 properties or selectors in NN4x
  • background-attachment
  • background-position
  • border-top, border-left, border-bottom, border-right (use the shorthand border or nothing)
  • display (except display:none)
  • font-variant
  • letter-spacing
  • list-style-image, list-style-position
  • vertical-align
  • word-spacing
  • white-space:nowrap
  • the !important declaration
  • the @import statement (used to implenent complex CSS you want NN4x to avoid)
  • :first-line and :first-letter pseudo-elements.

Checking your CSS

http://www.westciv.com/style_master/academy/links.html#checking

Resources

LINKS I frequently reference:

CSS BOOKS I recommend
  1. More Eric Meyer on CSS
    by Eric A. Meyer (April 2004) ISBN: 0735714258
     
  2. Eric Meyer on CSS "Mastering the Language of Web Design" by Eric A. Meyer (June 2002) ISBN: 073571245X
     
  3. Sams Teach Yourself CSS in 24 Hours by Kynn Bartlett (July 2002) ISBN: 0672324091
     
  4. Cascading Style Sheets "Designing for the Web" [2nd Edition] by Håkon Wium Lie and Bert Bos (July 1999) ISBN: 0201596253
     
  5. Cascading Style Sheets: Seperating Content from Presentation - 2nd Edition by O. Briggs, S. Champeon, E. Costello and M Patterson (March 2004) ISBN: 159059231X
     
  6. Cascading Style Sheets - The Designers Edge by Molly E. Holzschlag (March 2003) ISBN: 0782141846
     
  7. Designing CSS Web Pages by Christopher Schmitt (Sept 2003) ISBN: 0735712638

  8. Designing With Web Standards
    by Jeffrey Zeldman (May 2003) ISBN: 0735712018

back to top