CSS Sample

H1 { color: red }

• selector
• property
• value

HTML-CSS

<LINK REL=STYLESHEET TYPE="text/css" 
  HREF="http://www.style.org/.css">

<STYLE TYPE="text/css">
  @import http://style.com/basic
  H1 { color: red }
</STYLE>

STYLE attribute

<H1 STYLE="color: red">

CSS selectors

• name <H1> <EM>
• class <H1 CLASS=chapter>
• id <P ID=x67y>
• context <H1><EM>cool</EM>

H1 { color: red }
H1.chapter { margin: 0 }
#x67y { font-size: small }
H1 EM { color: blue}

CSS properties

• ~35 properties
• font
• color/background
• text
• box
• classification

Font properties

font-size: 12pt;
font-family: gill serif;
font-weight: bold;
font-style: small-caps;
line-height: 110%;
font: bold x-large gill;

Color/background

color: darkgreen;
background: repeat url(marble) white;
background: red/yellow fixed;
background: url(logo) top right;




Text properties
word-spacing: 1em;
letter-spacing: 1em;
text-decoration: underline;
vertical-align: baseline;
text-transform: uppercase;
text-align: center;
text-indent: 3em




Box properties
margin: 1em;
border: thick dotted green
padding: 3cm
width: 300px;
height: 200px;
float: left;
clear: left;





Classification properties
display: inline;
list-style: roman
white-space: pre




CSS values

length: mm em px
color: #FOO red
percentage
url: url(red)
keywords: x-large




Pseudo-classes
A:link { color: red }
A:visited { color: blue }
A:active { color: orange }




Pseudo-elements
P:first-line   { 
  font-style: small-caps 
}
P:first-letter { 
  font-size: 300% 
}



new toys

Small-Caps
blink
background images
B ig initials, drop-caps
color gradients