Separates Style from Content You don’t have to be both a great

designer and a content expert!Maintenance is EasierSite AccessibilityCurrent Site

HTML 3.2 <font color="#0000ff"><h4>a blue

headline</h4></font>XHTML 1.0

HTML <h4>another blue headline</h4> Style h4 {color : blue}

Not best practice▪ <h4 style="color: #0000ff;">a blue

headline</h4>

Internal (Embedded)<style type="text/css" media="all"><!--p { font: 1em Times serif; color: #c00; }h1 { font: 2em Times serif; color: #f00; }--></style>

Internal (Embedded)<h1>Help!</h1><p>Don’t forget that this is the content of the page</p>

HEAD BODY

selector {property : value;} h1 {color: red;}

h2 {color: red;} h1, h2 {color: red;}

H1, H2, P .notes .glossary

Block <div>, <p>, <h1>, <form>, <ul>, <li>▪ Always begin on a new line▪ Height, Margins can be changed▪ Width 100% of parent

Inline <span>, <a>, <label>, <input>, <img>,

<strong>, <em>▪ Begin on same line▪ Height, Margins cannot be changed▪ Width can’t be changed.

DIVs for DIVisions of logical contentSPANs for exceptions to the rules

Styles Class – multiple elements ID – one element

Name Styles & Classes correction No starting with # or non-alpha

Style Larger elements firsthttp://webdesign.about.com/od/css/a/aa071204.htm

/* Structure */ /* Typography */ /* Links */ /* Lists, images, etc. */

http://www.blogherald.com/2006/09/08/css-tips-and-tricks/

Font-family:Font-weight:Font-size:Line-height:Font-color:

html,body { margin: 0px; padding: 0px; border: 0px; }

body { font-size: 62.5% } Now continue to use ems for the rest of

your font sizes

Shorthand for Margins, Padding, Borders Top Right Bottom Left