Cascading Style Sheets Robin Burke ECT 270

Outline CSS properties Fonts Alignment Color CSS selection selectors

The Great Layout Debate Purist W3C Pragmatist web designers

A solution A separate standard for defining style Styles can be defined at different places document site local device or client user preference

What is a style? An association between a set of display properties a logical unit of HTML content Not document content Some exceptions numbered lists, captions, etc.

Result HTML goes back to defining structure Layout and display decisions encoded in the stylesheet Designer can easily change page format without affecting HTML

Cascading Author User Client Also possible to label styles as "important"

Inheritance Elements inherit their styles setting a style for the "body" element changes the whole document We will ignore the style sheet cascade in this class

In-line styles part of individual tags plus benefits of new CSS attributes style declared where it is used minus doesn't separate content from display global changes not simplified

Embedded style style is declared within a given page plus style information centralized minus can't be reused on other pages

External a separate document "style sheet" is used documents link to the style sheet plus style can be shared across pages minus another document to manage & distribute

Structure of CSS selector { attribute:value; } Example h1 { font-color:blue; } Multiple attribute/values pairs possible

Examples in-line style embedded style linked style

CSS Rules: Fonts Fonts are very complex platform-specific copyrighted different standards Multi-dimensional size weight style ornament family

Font families Categories serif sans-serif monospace cursive Specific fonts Times Roman Arial Courier

font-family styles Best practice PC font, Mac font, generic font; Example font-family: Arial, Helvetica, sans-serif; font-family: Times Roman, serif;

Font sizes Options Relative Absolute Units in, px, em, pt, pc Examples font-size: larger font-size: 12 pt font-size: 50 px font-size: small

Spacing Can control letter and line spacing letter-spacing word-spacing line-height

Alignment text-align horizontal alignment like "align" attribute vertical-align like "valign" attribute but more possibilities

Other font style choices text-weight controls boldness text-decoration underlining, strike-through text-transform uppercase, lowercase font-variant small-caps font-style italic

CSS Rules: Colors What can be colored? text background links Options color names RGB triplets hex or decimal

Text and link color color changes the text color example color: rgb(153,102,6) color: #FFEECC links can have state-dependent colors link – unvisited visited – visited active – while being clicked hover – while the cursor is there

Link colors Handled via "pseudo-classes" relative to a element a:link a:visited Example a:link { color: red; } a:visited { color: blue; }

Link color example a:link { color: red; } a:visited { color: blue; text-decoration: none; } a:active { font-weight: bolder; } a:hover { color: green; }

Background color Background of any element can be set not true in HTML

Background images limited in HTML either large or tiled With CSS Total control over the background image

Example Background options

Lists can choose different kinds of bullets can control nesting behavior Example

CSS Rules: Selectors any html element name element with particular attribute td[align="center"]  not implemented in IE 6.0 element relationships a b b is a child of a a > b b is some descendant of a a + b b follows a (sibling) designer-defined classes

CSS Pseudo-elements Pseudo-elements a class name that is pre-defined but isn't an HTML tag Example first-line first-letter

Midterm What to study Fundamentals client/server interaction how the web works HTML topics Basics Tables Forms CSS not on exam

Next week Midterm More CSS