Client-side
CSS

Parke Godfrey
24 October 2012
26 October 2012
CSE-2041

CSS
the view

CSS provides a means to specify
  - style
  - layout

It is the browser that renders the HTML document.

And there can be many different types of browers!
  - by capability
      . e.g., Links vs Firefox
  - by form factor
      . aspect ratio
        e.g., iPhone4 vs iPhone5
      . size
        e.g., iMac vs iPad vs iPhone

So, CSS provides design guidelines.
The paradigm is to specify these design specifications by rules.

The CSS Rule

match { property: value }

And that's it for CSS! Nice, elegant, and declarative!

Okay... what's it for?

The CSS rules that have been declared will match to elements in the HTML document.
The matched element's property will be set to that value.

How is the matching to be done?

By tag name.
By classes and id's.
1. These are the hooks in the HTML model for the CSS rules.
2. Set on the element via special attributes in the tag: class & id.
By structural position in the document (DOM).
1. Indicated by relative positioning of elements.
2. E.g., all elements under a <div> of class yorku.
And combinations of #1 – #3!

Match Syntax


    tag { ... }

matches any element of that tag


    .class { ... }

matches any element of that class


    #id { ... }

matches the element with that id (if any)

Match Syntax
compounding

And these can be compounded.


    tag.class { ... }

matches any element of that tag and of that class.


    tag.#id { ... }

matches the element of that tag with that id (if any)


    tag.class₁.class₂
    { ... }

matches any ele of that tag and of class₁ and class₂.


    tag[attr] { ... }

matches any element of that tag with an attribute attr

...

Match Syntax: structure

Let tagged be a simple match specification from before: e.g., tag, #id, tag.class, & tag.class₁.class₂.


    tagged₁ tagged₂ { ... }

any element maching tagged₂ that is a descendent of an element matching tagged₂


    tagged₁ > tagged₂ { ... }

any element maching tagged₂ that is a child of an element matching tagged₂


    tagged₁ + tagged₂ { ... }

any element maching tagged₂ that is the immediate right sibling of an element matching tagged₂

CSS Rule Shorthands

match {
        prop₁: val₁;
        prop₂: val₂;
    }

is just shorthand for

match {
        prop₁: val₁
    }

match {
        prop₂: val₂
    }

And


        match₁,
        match₂ {...}

is just shorthand for

match₁ {...}

match₂ {...}

Easy, no?

Well, the CSS model is pretty easy...but you can build up things quite quickly that are complex!

Issue

What to do when two — or more — rules match to an element to set the same property, (but with different values)?

We need precedence “rules” to determine which of the matching CSS rules wins.

In CSS, these precedence rules are defined.

CSS Precedence
specificity

The more specific wins.

.class >> tag
#id >> .class
tag.class >> .class
tag₁ > tag₂ >> tag₂
...

The specificity rules are complex for complex taggings. The match specifications are scored, and the one with the best score wins.

CSS Rule Match Ties?

And, after all of that, what if in our conflict of two rules matching the element the two rules tie in score?
The last rule wins.
The rules are considered as ordered in a list. The one furthest down the list wins (in cases of ties for specificity
That is, further in the list is of higher precedence.

The CSS Rule Order
The Cascade

So... how are the rules ordered then?

Well, from top to bottom, as they were written in the HTML document in the <style>'s, of course.
Simple enough. Wait... what about if we have external CSS styles too (<link>'s)?
The external ones are appended to the list in the order called.
Then the in-place ones (<style>'s) are appended to the list, in the order they appear.

This forms the Master List of the CSS rules for the document.

The Master List II
Author vs User, Important vs Normal

  . Revise the Master List:
    keeping the relative order of the rules, separate by

      * UserImportant
      * AuthorImportant
      * AuthorNormal
      * UserNormal

  . Append these four lists back together
    in that precedence order:

     1. UserNormal
     2. AuthorNormal
     3. AuthorImportant
     4. UserImportant

    This forms the final Master List.

Inheritance
& default

If an element still has no value assigned for a given property, it may inherit the value from the closest ancestor in the DOM that has a value (for that property).
Not all properties are inheritable.

Default

Finally, if an element still has no value assigned for a given property after inheritance, the browser's default for the property is assigned.

CSS for Layout

  . Boxes
      * Things are organized in boxes.
      * Boxes can stack horizontally and vertically
      * Boxes may be nested.
      * Every element in the DOM is a box!

  . Flow
      * Specifies how boxes
          . stack horizontally and vertically
          . are aligned to the top / bottom / left / right
          . etc.

The Box Model

  . margins
  . padding
  . borders

Flow

  . display
      * inline
      * block
      * others...

  . Each HTML tag is a block or inline box by default.
      * <p>?
      * <em>?

  . <div> & <span>
      * <div> is the work-horse, generic box.
        It is block, by default.
      * <span> is the generic inline box.

  . And lots, lots more details

Client-side CSS

CSS the view