• The Purpose of a Document Description Language (e.g., HTML):
  • A way to describe the (usually hierarchical) parts of a document
• The Purpose of a Stylesheet:
  • Define the form/appearance of a document

• The Document:
  • The author
• The Stylesheet:
  • Agents (e.g., browsers) have a default stylesheet for some documents (e.g., HTML documents)
  • The author may want to define some aspects of the form/appearance of a document
  • The user of a document may want to apply their own stylesheet (e.g., people with vision problems might want to use a large font)

• Precedence:
  • Some kind of precedence/weight must be given to the different stylesheets
• The Cascade Process in CSS:
  • The Sort Order (in Increasing Precedence)
    • Agent declarations
    • User "normal" declarations
    • Author "normal" declarations
    • Author "important" declarations
    • User "important" declarations
  • Resolving Ties
    • If there are ties, more specific selectors (see below) override less specific selectors
    • If there are still ties, the last declaration is used

• HTML:
  • Use a link element with rel="stylesheet", type="text/css", and an appropriate href
  • The media attribute (which can take values like handheld, print, and screen; can include operators like and and or; and can use properties like height and width) can be used to choose between different stylesheets (e.g., media="screen and (max-width:600px)" indicates that this stylesheet should only be loaded for screens with a width of 600px or less)
• XML:
  • Use a <?xml-stylesheet type="text/css" ?> processing instruction that has an appropriate href

• Parts of a Rule:
  • Selector
  • Declaration
• Parts of a Declaration:
  • Property Name
  • Property Value
• Syntax:
  • selector { name:value[;name:value]... }
  • Important rules are denoted by ! important
• An Example:
  • em {color: red; font-style: italic}

• Numbers:
  • Integers, Real Numbers
• Lengths:
  • A number followed by a unit identifier (e.g., 12.5pt)
  • Valid unit identifiers include in, cm, mm, pt (1/72 of an inch), pc (12pt), px (0.75pt), vh (1% of the viewport height) and vw (1% of the viewport width).
• Percentages:
  • A number followed by the percent sign (e.g., 120%)
• Colors:
  • A color is either a keyword (e.g., red, Background) or an RGB value
  • RGB values can be specified as #RGB (e.g., #f00), #RRGGBB (e.g., #ff0000), or rgb(R,G,B) (e.g., rgb(255,0,0) or rgb(100%,0%,0%))
• Strings:
  • Can be enclosed in single or double quotes

• Result of the Cascade:
  • The cascade need not assign a value to every property
• Inherited Values:
  • If the cascade does not result in a value being assigned to a property then the value may be inherited from the containing element
  • Each property definition (in the CSS specification) indicates whether or not it is inherited
• Initial Values:
  • If neither the cascade nor inheritance results in a value being assigned to a property then that property will remain at its initial value
  • Each property definition (in the CSS specification) specifies the initial value

• Backgrounds:
  • background-color, background-image
• Fonts:
  • font-family, font-size, font-style, font-weight
• Text:
  • text-align, text-decoration, text-indent, text-transform

• Universal:
  • Purpose - Match any element
  • Pattern - *
  • Example - * {color: black}
• Type:
  • Purpose - Match an element of a particular type
  • Pattern - E
  • Example - em {font-style: italic}
• Placement:
  • Purpose - Match an element based on the order of the elements (e.g., immediately after, preceded by)
  • Pattern - B+A selects all A elements that are placed immediately after a B element
  • Pattern - B~A selects all A elements that are preceeded by a B element
  • Example - input+label {color: red}

• Descendant:
  • Purpose - Match an element of a particular type that is contained in (i.e., a descendant of) an "ancestor" of a particular type
  • Pattern - A D
  • Example - figure figcaption{font-size: 10pt}
• Child:
  • Purpose - Match an element of a particular type that is immediately contained in (i.e., is a direct descendant/child of) a "parent" element of a particular type
  • Pattern - P > C
  • Example - body > p {font-family: sans-serif}
• Attribute:
  • Purpose - Match an element of a particular type with a particular attribute value
  • Pattern - E[name op value]
  • op - = (equals), *= (contains), ~= (contains word), ^= (starts with), |= (starts with word), $= (ends with)
  • Example - p[class="opening"] {text-indent: 5ex}

• Pseudo-Classes:
  • Purpose - Matches an element of a particular type that is in a particular state
  • Pattern - E:state (where state can be such things as active, enabled, focus, hover, link, valid, visited)
  • Example - a:hover {color: red}
• Class:
  • Purpose - In HTML, matches an element of a particular type and particular class attribute
  • Pattern - E.C
  • Example - p.opening {text-indent: 0ex}
• ID:
  • Purpose - In HTML, matches an element of a particular type and particular id attribute
  • Pattern - E#I
  • Example - p#warning {color: red}

• Using an id:
  • Only when an element is unique (i.e., will be treated like no other element)
• Using a class:
  • Only to define a set/subset of elements (i.e., when a set/subset of elements will all be treated the same way)
• Using Containment:
  • Only when the containment hierarchy in the document determines how elements will be treated

An Excerpt from The Design and Implementation of Multimedia Software

• Box Properties:
  • Each element in the document can be thought of as a box as follows:
  • 
  • The size of all four "sides" of these areas are properties (i.e., margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom, padding-left, border-top, border-right, border-bottom, and border-left)
  • The border-width, border-color, and border-style are also properties
• Display Properties:
  • Elements can be displayed in a variety of ways - as a block (e.g., paragraph), parts of a line (e.g., words), part of a list, part of a table, etc...
  • This is determined by the display property which can be inline, block, list-item, table-row, table-column, etc...

A Button Bar

A Labeled Input Field

• The top, right, bottom and left Properties:
  • Can be used to position an object
• Approaches:
  • Absolute - the position of the box is specified in absolute coordinates (e.g., pixels)
  • Normal Flow - the position of the box is determined by the position of its "neighbors"
• Values of the position Property:
  • static - use the normal flow (i.e., ignore top, right, bottom and left)
  • relative - use the normal flow and then offset the box
  • absolute - top, right, bottom and left specify the position

Sticky Notes

An Input Field with an Internal Label

A Menu Bar