  CSS
|
Today we are talking about version 2 rev 1
|
Formal definition
|
|
Tutorial
|
|
Browser compliance test Acid 2 test
|
|
CSS is Cascading Style Sheets
|
A way of describing presentation of HTML data
|
Fast example
|
without
|
|
with
|
|
Define presentation
|
 of existing HTML tags
|
Designed to separate presentation from data
|
specific elements (id attribute)
|
classes of tags (class attribute)
|
rule-based
|
rules are usually stored in a "Style Sheet"
|
styles can come from several places in a document, just like Javascript can come from several locations
|
multiple style sheets "cascade" together
|
By using external style sheets
|
control the look of multiple websites at once
|
reduce bandwidth demands
|
CSS Rule Format
|
Syntax:
|
selector[,selector] {property:value[; property:value ... ]}
|
examples
|
body {color:black}
|
h1{font-family:"sans serif"; font-weight:bold}
|
selectors may be grouped:
|
h1,h2,h3 {font-weight:bold}
|
selector may be a "class"
|
.rightAlign {text-align:right}
|
<img src="..." alt=".." class="rightAlign"/>
|
selector may be a tag and a class
|
p.rightAlign{text-align:right}
|
<p class="rightAlign">
|
selector may be an "id"
|
#rightParagraph{text-align:right}
|
<p id="rightParagraph">
|
selector may a tag and id
|
p#rightParagraph{text-align:right}
|
psuedo classes
|
special cases
|
:active,:focus:hover:link:visited:first-child:lang
|
a:hover{color:rgb(10,0,100)}
|
psuedo elements
|
:first-line,:first-letter
|
:before
|
:after
|
media types
|
@all, @aural, @braille,@embossed, @handheld, @print,@projection,@screen,@tty,@tv
|
Comments are like C/ Java
|
/* */
|
Where does the presentation come from, aka "cascading"
|
Browser default is overrulled by
|
External Style Sheet which is overulled by
|
Internal Style Sheet which is overrulled by
|
Inline style overrulled by
|
User Style Sheet
|
typically specified in the browser for accesibility
|
The cascade
|
How do you reference an external style sheet?
|
|
How do you create an internal style sheet?
|
|
How do you create an inline style sheet?
|
|
The effect of multiple style sheets
|
attributes can be overridden separately
|
Some specific style elements
|
Basics
|
background
|
color, image, repeat, attachment, position
|
|
text
|
color, direction, text-align, text-transform
|
font
|
style, variant, weight, size
|
borders
|
color, width, four sides
|
margins, padding
|
%, length
|
list-style, list-style-image
|
Advanced
|
height, width
|
auto
|
display
|
inline, none,block table
|
float
|
|
|
|
position
|
visibility
|
cursor
|
positioning
|
z-index
|
|
Simple Style Sheet Demo
|
|
Elaborate Style Sheet Demo
|
|
Accessing CSS with Javascript and DOM
|
|