Client-side
CSS

Parke Godfrey
26 October 2011
2 November 2011
CSE-2041

Credits

These slides are based in part on ones from the following sources.

Prof. Hamzeh Roumani, CSE2041

How to style your page?

Style is format and layout.

Yes, HTML provides the tools for layout & format.
- E.g., <table> for layout.
- E.g., <font> for format.
(Many of these are officially depreciated or actively discouraged nowadays.)
But...is it a goood idea to mix style directives with your HTML?
- Generally, no!
- This mixes semantic markup (HTML) with presentation. (Mixes up model and view.)
- We would like a separation of concerns.

Separate style and content

Markup is then cleaner, simpler, and easier to maintain.

Goals

conciseness
- Should not have to repeat directives — e.g., text should be red — over and over.
adaptability
- The style should adapt, and “degrade” gracefully, to “fit” the client.
conflict resolution
- Conflicts for styling — which will arise for complex styles — should be resolved in a clear, logical way.
out-source rendering
- Out-source the job of presentation rendering to the client.

What separating style and content buys us

Can have several styles for a single document — by having a selection of styles for it.
- See CSS Zen Garden.
Can provide easily a consistent look for a multi-page site.
Can handle presentation when content comes from multiple sources / sites.
- Need a means to reconcile multiple styles.

Cascading Style Sheets (CSS)

The Web standards for style directives are style sheets, specifically Cascading Style Sheets (CSS).

Hooks into HTML source

The HTML tags themselves.
The id attribute.
- validation: a given id value can appear in a document only once.
The class attribute.
- A tag cannot have the same attribute twice! An element can belong to more than one class, though.
- E.g., class="cse_style cse2041 parkes"
The CSS pseudo-class attributes.
- See W3School's CSS Pseudo-classes.

CSS Syntax

A CSS style sheet is a list of style rules.
A style rule consists of a selector, followed by a list of declarations.
- The selector selects elements from the document by tag, id, and class.
- A declaration is a property-value pair.

See W3School's CSS2 Synatx for the syntax.

See W3 Org's CSS2's Selectors for a guide to more advanced selector syntax.

How are CSS style sheets attached to a document?

By a <link .../> in the HTML document's <head>.

See W3School's link tag.
By in-document style inclusions — <style>...</style> — appearing in the <head> element.

Style can also be marked up in the document itself (in the <body>).

in-line in an element's style attribute, or
marked up in old-fashioned HTML presentation tags (e.g., <font>).

What is cascading about them?

A single page / document may have many style sheets “attached”, so that apply to it.
- From <link> (external) and <style> in <head> (in-document).
- As well, there can be in-line style directives, using the style attribute.
- And old-fogeys may be marking up style in HTML too! (E.g., by <font>.)
These style sheets can conflict in places.
- E.g., p {color: red} and p {color: blue} might come from different style sheets, respectively.
We need a way to consolidate, or “cascade”, all these together.

Rule Precedence
& The “Unified” Style Sheet

How does the browser decide which style rule to apply to an element

if more than one rule applies, and
they conflict?

The browser engine consolidates all attached style sheets — external (<link>) and in-document (<style> in <head>) — together into what I will call the unified style sheet for the document.

Precedence of Style Markup

Style directives take precedence as follows. (Top of the list is highest, bottom is lowest.)

CSS in-line style
- in the style attribute of the element
the document's unified style sheet
- using matching rules
in-place HTML style directives
- from <font> and such

Cascading the Style Sheets
into a “unified” style sheet

How are the attached style sheets cascaded together (into the unified style sheet)?

All external CSS sheets (<link>) are appended in the order called, then the in-document style sheets are appended in the order they appear.

Author / user & important / normal

Pieces of the consolidation — no matter where they came from — are re-arranged according to the user-author, important-normal precedence:

user important
author important
author normal
user normal

Rule Matching

Which CSS rule — from the unified spread sheet — applies to a given element? First,

more specific selector > more general selector

Then, of the equally best matching rules that apply to the element,

later > earlier

That is, lower in the unified style sheet wins.

Note that this is done separately for each style element!

E.g., font-family and color.

Style Inheritance

What if no style directive applies to a given element (for a given style property)?
- Then that element will inherit the style value from the closest enclosing element (ancestor) in the document that has a set value for the property.
And if still no value for the property?
- Use the browser's default.

CSS Layout

CSS uses the box model.

Boxes can be nested.

Basic rules:

Boxes within a block element (e.g., <div>) are aligned vertically.
Boxes within a in-line element (e.g., <span>) are aligned horizontally.

See BrainJar's CSS Positioning tutorial on box structure, positioning, and flow.

Client-side CSS