Client-side
CSS
Parke Godfrey
19 October 2011
CSE-2041
Parke Godfrey
19 October 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.
In general, scan through W3School's CSS3 Tutorial. CSS3 is the newest standard.
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.