Client-side
CSS
Parke Godfrey
26 October 2011
2 November 2011
CSE-2041
Parke Godfrey
26 October 2011
2 November 2011
CSE-2041
These slides are based in part on ones from the following sources.
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.
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.
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.
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.
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.
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>
).
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.
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.
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
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
Which CSS rule — from the unified spread sheet — applies to a given element? First,
Then, of the equally best matching rules that apply to the element,
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
.
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 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.