CS Students' Brief On CSS
CS Students' Brief On CSS
CSS
Essential CSS for CS3172
Background
Presentation vs. Structure
An early goal of the WWW
Easy to update many pages at once
Easier to maintain consistency
Early goal: authors' vs. readers' rules
Now partly respected by major browsers
CSS 1 CSS 2
Extended the scope of the rules
2
CS Student Overview of CSS
Ignoring most of the incompatibilities for now
To get an overall understanding
Later slides will show some details
We'llexamine 4 interesting parts of the
presentational instructions and options later
Colour Font Border Positio
n
But first we'll see
What it can do (CSS Zen Garden,CSS Examples)
& How it works
3
What's Next?
Introduction
to CSS rule method
CSS selectors
6
Selectors
Can apply to every element of a type
E.g. h2
More often to a class of element
<cite class="textbook book">
Matches both textbook and book
7
Special Elements
8
Selectors (cont.)
E
E1 E2
The selector
E1 > E2 always refers to
E1 + E2 the rightmost
E#id element
E.class
9
How CSS Works Matching
Every XHTML document represents a document
tree
<h1></h1>
<p><span></span></p>
<ul>
<li></li> What will h1 + p match?
<li></li>
<li><span></span></li> What will ul > span match?
</ul>
What will ul {color:blue}
<p></p>
</body> do?
</html>
13
Inheritance in CSS
The Cascade
Inheritance
moves down tree
Cascading move horizontally
It works on elements that the same rules apply to
It is only used for tie-breaking when 2 rules apply
The highest ranking rule wins
Most specific wins (usually)
But important rules override others
!important beats plain
User's !important beats everything else
14
Details of the CSS 2.1 Cascade
For each element E
1. Find all declarations that apply to E
2. Rank those declarations by origin
a. user !important > author !important > inline style
b. inline style > author plain > user plain > browser
3. If there is not a clear winner then most specific rule
wins.
Compute specificity as shown on next 2 slides.
15
CSS 2.1 Cascade (Continued)
3. Compute specificity thus:
a. If one rule uses more # symbols than the others then it
applies, otherwise
b. If one rule uses more attributes (including class)
class than the
others then it applies, otherwise
c. If one rule uses more elements then it applies
d. For each two rules that have the same number of every
one of the above specifiers, the one that was declared last
applies
class is the only attribute that can be selected
with the . in CSS
An equivalent method is shown on the next slide
16
CSS 2.1 Cascade Computation
The cascade algorithm in the standard uses a semi-
numerical algorithm
The computation looks like this:
class is an
1 if the selector is an inline style
attribute
a=
0 otherwise
17
To find the value for an element/property combination, user
agents must apply the following sorting order:
1. Find all declarations that apply to the element and property in
question, for the target media type. Declarations apply if the
associated selector matches the element in question.
Summary
CSS 2.1 Cascade:
2. Sort according to importance (normal or important) and origin
(author, user, or user agent). In ascending order of precedence:
a. user agent declarations
b. user normal declarations
c. author normal declarations
d. author important declarations
e. user important declarations
3. Sort rules with the same importance and origin by specificity of
selector: more specific selectors will override more general ones.
Pseudo-elements and pseudo-classes are counted as normal
elements and classes, respectively.
4. Finally, sort by order specified: if two declarations have the same
weight, origin and specificity, the latter specified wins. Declarations
in imported style sheets are considered to be before any
declarations in the style sheet itself.
Apart from the !important setting on individual declarations, this
strategy gives author's style sheets higher weight than those of the
reader. User agents must giveCSS 2.1 the ability to turn off the
the user 19
influence of specific author
6.4.1style sheets, order
Cascading e.g., through a pull-down
Pseudo-Elements?
Pseudo-Attributes?!
CSS introduces the concepts of pseudo-elements and pseudo-classes to
permit formatting based on information that lies outside the document tree.
Classes Elements
:first-child :first-line
:link, :first-letter
:visited :before,
:hover, :after
:active,
:focus CSS 2.1 5.10
Pseudo-elements
:lang and pseudo-classes
Selector Resources on the WWW
The CSS 2 Standard
At W3.org (http://www.w3.org/TR/REC-CSS2/ )
In frames (http://www.meyerweb.com/eric/css/references/css2ref.html
)
Selector Tutorial [Excellent!] (
http://css.maxdesign.com.au/selectutorial/)
SelectORACLE (http://gallery.theopalgroup.com/selectoracle/)
23
A Very Brief Overview of
Visual Formatting With CSS
Visual Formatting
Fonts
Colours
Position
Box model and Borders
24
Visual Formatting: fonts
Some major properties
font-family
body {font-family: Garamond, Times, serif}
Serif fonts and sans-serif fonts
font-size:
Length (em,ex), percentage, relative size, absolute size
font-style:
Normal, italic, oblique
font-weight:
Lighter, normal, bold, bolder, 100, 200, , 800, 900
Set all at once with font
25
Visual Formatting: Colours
How to specify
16 Predefined names
RGB values (%, #, 0255)
System names: e.g. CaptionText
Dithered Colour
See Lynda Weinman's charts
Okay for photos, etc.
26
Visual Formatting: Colours (cont.)
Major properties
background-color
color
27
Visual Formatting: Images
position:
28
Visual Formatting: Images (cont.)
z-index: depth
29
Visual Formatting: Box Model
Margin
Border
Padding
31
Box Model (Cont.)
Padding
Size in %, em, or ex for text
padding-top, padding-right, padding-bottom, padding-left
Mnemonic: TRouBLe
Set all at once with padding
Margin
Similar to padding Width is of content only.
But can also be auto Neither the border nor the
padding are included in width.
see centring example
32
Making Room for a
fixed position object
body
{margin-left: 6.3em}
div.up
{position: fixed;
left: 1em;
top: 40%;
padding: .2ex;
min-width: 5.5ex }
Jump Box
34
Basic Formatting of the
Jump Box
HTML Outline
Extract of CSS Rules
<body> body
<!-- --> {margin-left: 6.3em}
<div class="up"> div.up
<dl> {position: fixed;
<dt>Jump to left: 1em;
top</dt> top: 40%;
<!-- --> padding: .2ex;
</div>
min-width: 5.5ex }
</body>
35
Effects of Box Formatting
36
body {padding:4em}
37
div.up {margin: 4em}
38
div.up dl {margin:4em}
39
CSS For Dual Presentation
What if users don't have CSS?
See button example
40
Hiding CSS
Why do we need to?
Two failure modes: graceful and catastrophic
Pragmatism
Hubris
41
A Trick For Dual Presentation
visibility: visible:hidden
element can't be seen
visible or hidden but it still uses space
display: display:none
element isn't shown
none
42
Hiding CSS How (overview)
Ensure that markup is meaningful without CSS
Order of presentation
Extra/hidden content
Make styles in layers
v4.0 browsers dont recognize @import
Some browsers ignore media rules
Later, and more specific, rules override other rules
Use parsing bugs for browser detection
Example follows
Use browser-specific Javascript
Server-side detection doesnt work well
Too much spoofing
43
Hiding CSS Some details
Credits follow
IE 5 for Windows computes incorrect sizes
It also doesnt understand voice-family,
so
p {
font-size: x-small; /* for Win IE 4/5 only */
voice-family: "\"}\"";
/* IE thinks rule is over */
voice-family: inherit; /* recover from trick */
font-size: small /* for better browsers */
}
html>p {font-size: small} /* for Opera */
44
Hiding CSS Caveats
There are no fool-proof workarounds for every bug in
every browser
Some workarounds are incompatible with strict
XHTML
The workarounds take time and are sometimes
inelegant
But they are necessary if you want to reach the
largest possible audience
46