C S S Top Elements

Font-size : x-large ;p {Background-color : purple ;

}SelectorSelectorProperty namesProperty names

Declarations or valuesDeclarations or values

HTML Style• P• H1• H2• body

Class Style• .class• Psuedo-class

Applies to common tags Applies to anything

IDDIVisions

HEAD BODY

<title> </title> <p> </p><h1> </h1>

<style type="text/css"><!--.style1 { font-size: xx-large; font-family: Georgia, serif; color: #FF0000;}--></style>

<h1 class="style1">This is an H1 Style</h1>ADD CSS for Styles

Internal CSS Sheet

Internal / Embedded• Build one page with all

attributes & styles• Export the styles to

separate CSS page

External• Build regular html page• Build separate CSS page• Link the HTML to CSS

FontSizeColorBackgroundLinksHeadings

Font-family:Font-size:color:a:linka:visitedH1H2P

• Points for wrappers

• Create a DIV #wrapper• Box: 700 px width

• 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

Pixels for relative size (exc IE)Ems for relative sizes

Numbers for absolute sizeRelative Sizes based on default

Size Matters

Pixel – dot on computer monitor – exc. IEPoints – 1/72 inchInchCentimeterMillimeterPicaEmsExsPercentages

• Format as you go • Create rules

LinkAddEditDelete

Stay Out of TRouBLe

• Shorthand for Margins, Padding, Borders– Top– Right– Bottom– Left

Link Order• a:link• a:visited• a:hover• a:active

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.

• Style Larger elements first• DIVs for DIVisions of logical content• SPANs for exceptions to the rules• Styles– Class – multiple elements – Starts with a . Case

sensitive.– ID – one element – Starts with a # Case sensitive.

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

http://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/

• a:link • a:visited• a:hover• a:active

• a.nav:link• a.nav:visited• a.nav:hover• a.nav:active