# CSCI E-75: Cascading Style Sheets (CSS)

April 21, 2008

David P. Heitmeyer
david_heitmeyer@harvard.edu

Harvard University
Division of Continuing Education
Extension School

## Cascading Style Sheets (CSS)

- XHTML for Markup
- CSS for style and presentation

### Markup and Presentation Intertwined #### Symptoms proprietary HTML extensions making text into images proliferate use of "spacer" 1px by 1px GIF images deprecated HTML elements and/or attributes using tables for layout #### Consequences Changing design can be a major undertaking HTML/XHTML very complex; can easily lead to errors Unnecessary content constraints | ### Separated Allows structure and presentation to be separate. Allows greater control over presentation than XHTML/HTML alone. Improves accessibility. Simplifies XHTML/HTML markup, both in term of structure and size

## The Power of Stylesheets

- United States Constitution (no external stylesheet)

W3C Core Styles applied to the US Constitution.

- Chocolate Stylesheet
- Midnight Stylesheet
- Modernist Stylesheet
- Oldstyle Stylesheet
- Steely Stylesheet
- Swiss Stylesheet
- Traditional Stylesheet
- Ultramarine Stylesheet

## Harvard College Admissions

Harvard College Admissions | With CSS disabled:

### Headings

Heading elements (h1,h2,etc.) combined with CSS are very powerful. Headings can remain headings in markup and CSS can style them as desired.

### Lists

Lists combined with CSS are very powerful. Lists can remain lists in markup (navigation, content items, etc.) and CSS can style them as desired.

## Department of African and African American Studies

Department of African and African American Studies

With CSS disabled:

## Designing with Stylesheets: CSS Zen Garden

css Zen Garden: The Beauty in CSS Design. A demonstration of what can be accomplished visually through CSS-based desgin.

## XHTML: a simple example with CSS

- No CSS: simple.html
- With CSS:
  - simple-style.html
  - simple-style.css

<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition.dtd"> <html> <head> <title> My Schools </title> <!-- this is the reference to the CSS --> <link rel="stylesheet" href="simple-style.css" type="text/css"/> </head> <body> ... </body> </html>

And here is the stylesheet (simple-style.css):

body { margin-left: 10%; margin-top: 1em; margin-right: 10%; background: #ff9; } h1 { font-family: Arial, sans-serif; color: #600; border-bottom: thin dotted black; } ul { list-style-type: none; } li { margin-top: 1em; font-size: 1.25em; } img { border: thin solid black; } a { text-decoration: none; } a:link, a:visited { color: blue; } a:hover { color: white; text-decoration: underline; background: blue; }

## CSS Recommendations from the W3C

- CSS 1, December 1996; Revised January 1999)
- CSS 2, May 1998
- CSS 2.1, Candidate Recommendation, July 2007
- CSS Current Work (CSS Mobile Profile, Print Profile, TV Profile, CSS3)

### CSS Validator

W3C CSS Validation Service
http://jigsaw.w3.org/css-validator/

## CSS Resources

www.alistapart.com | www.simplebits.com
meyerweb.com/eric/css/ | www.westciv.com/style_master/house

### Books

- Cascading Style Sheets : Designing for the Web (3rd Edition) by Hakon Wium Lie and Bert Bos
- Cascading Style Sheets: The Definitive Guide, 3rd Edition by Eric Meyer
- Eric Meyer on CSS and More Eric Meyer on CSS
- Bulletproof Web Design, 2nd edition, by Dan Cederholm
- Web Standards Solutions: The Markup and Style Handbook by Dan Cederholm
- CSS Cookbook by Christopher Schmitt

### Specifications / Resources

- W3C Cascading Style Sheets
- Cascading Style Sheets, Level 1
- Cascading Style Sheets 2.1
- W3C CSS Validation Service

## Binding Styles to Markup

Three ways to bind CSS rules to XHTML/HTML markup:

- style attribute in element
- style element in XHTML/HTML head
- External CSS document, through the link element in XHTML/HTML head

## style attribute

Example 10.1
Example 10.1 Source:
<p style="color: black; background-color: teal; padding: 1em; font-family: helvetica, sans-serif; text-align: justify; margin: 2em;" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p>
Example 10.1 Rendered:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.

## style element

Example 10.2
Example 10.2 Source:
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p>
In style element (`<style type="text/css">`) within head element:
p { color: black; background-color: teal; padding: 1em; font-family: helvetica, sans-serif; text-align: justify; margin: 2em; }
Example 10.2 Rendered:

- With Styles
- Without Styles

## link element

The link element can reference an external stylesheet.
Example 10.3
Example 10.3 Source:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p>
In example3.css
p { color: black; background-color: teal; padding: 1em; font-family: helvetica, sans-serif; text-align: justify; margin: 2em; }
In head element:
<link rel="stylesheet" type="text/css" href="example3.css"/>
Example 10.3 Rendered:

- With Styles
- Without Styles

## Anatomy of a CSS Rule

Example 10.4
Example 10.4 Source:
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p>
In style element (`<style type="text/css">`) within head element:
p { color: red; background-color: blue; }
Example 10.4 Rendered:

- With Styles
- Without Styles

### CSS Rule

### Selector and Declarations

### Properties and Values

## Combining Rules

Rules can be combined. The following two sets of style rules would produce identical results. Rules can be listed separately:

p {color: black;} p {background-color: teal;} p {padding: 1em;} p {margin: 1em;} p {font-family: helvetica, sans-serif;} p {text-align: justify;}

Or, rules can be grouped. Property:Value pairs need to be separated by a semicolon.

p { color: black; background-color: teal; padding: 1em; margin: 1em; font-family: helvetica, sans-serif; text-align: justify; }

## Combining Selectors

Selectors can be combined into comma-separated groups.
h1 { color: maroon; } h2 { color: maroon; } h3 { color: maroon; } h4 { color: maroon; } h5 { color: maroon; } h6 { color: maroon; }
We combine the selectors so that a single declaration applies to multiple selectors.
h1, h2, h3, h4, h5, h6 { color: maroon; }

## class selectors

The class and id attributes of XHTML elements can be used in conjunction with styles.
Example 10.5
Example 10.5 Source:
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div> <div class="withstyle" >Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.</div> <div class="warn" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div> <div>Lorem ipsum dolor sit amet, <span class="warn" >consectetuer adipiscing elit</span>. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div> <div id="legalese" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div>
In style element (`<style type="text/css">`) within head element:
div { margin: 0.5em; padding: 0.5em; font-family: times; color: black; background-color: white; } div.withstyle { margin: 0.5em; padding: 0.5em; font-family: sans-serif; color: navy; background-color: olive; } .warn { color: red; background-color: yellow; font-weight: bold; } #legalese { font-size: 0.6em; color: #cccccc; }
Example 10.5 Rendered:

- With Styles
- Without Styles

## id selectors

Example 10.6
Example 10.6 Source:
<div id="header" ><h1>Lorem ipsum dolor</h1></div> <div id="main" > <!-- main content --> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </div> <div id="footer" >Nulla turpis erat, faucibus commodo, iaculis id, aliquet quis, lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
In style element (`<style type="text/css">`) within head element:
#main { font-family: Times, serif; } #header { font-family: arial, helvetica, sans-serif; background-color: #900; color: #fff; text-align: center; } #footer { font-family: arial, helvetica, sans-serif; padding: 1em; margin-top: 1em; color: #999; border-top: thin solid #999; text-align: center; font-size: 80%; }
Example 10.6 Rendered:

- With Styles
- Without Styles

## Contextual Selectors

Example 10.7
Example 10.7 Source:
<div> <em>Emphasized text</em> outside of <strong>li</strong> appear "normal". <ul> <li><em>Emphasized text</em> within <strong>li</strong> have a different style.</li> </ul> </div>
In style element (`<style type="text/css">`) within head element:
li em { color: red; background-color: navy;}
Example 10.7 Rendered:

- With Styles
- Without Styles

## Selectors

- element
- descendant
  - `ul li`
- class
  - `p.abstract`
  - `.warn`
- id
  - `#main`
  - `#head`
- child
  - `body > p`
  - `ul > li`
- attribute
  - `input[type=text]`
  - `input[type=radio]`
- wildcard (*)

## Inheritance

Properties are typically inherited by children elements.
Example 10.8
Example 10.8 Source:
<div> Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.</div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.</p>
In style element (`<style type="text/css">`) within head element:
body { color: navy; } em { color: red; } div { color: green; }
Example 10.8 Rendered:

- With Styles
- Without Styles

Note: Firebug is a very useful Firefox extension for analyzing CSS properties and values.

## The Cascade

Suggested reading: CSS 2.1: Assigning property values, Cascading, and Inheritance

### Stylesheet Origin

- author's stylesheet
- reader's stylesheet
- UA's stylesheet

### Specificity of Selector

- "id" attributes
- "class" attributes
- element names

### Order

- last occurence has higher specificity

## The Cascade in Action

Example 10.9
Example 10.9 Source:
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. </p> <div id="maincontent" > <p>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Vestibulum nibh.</p> <div class="note" > <ul> <li>Proin sollicitudin ante vel eros.</li> <li>Nunc tempus.</li> <li>Quisque vitae quam non magna mattis volutpat.</li> </ul> <p>Quisque feugiat tellus ultricies urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam tincidunt.</p> </div> <ul> <li>Pellentesque sit amet metus.</li> <li>Sed sollicitudin feugiat massa.</li> <li>Sed magna.</li> </ul> </div> <p>Sed malesuada elit non augue. Vestibulum nec nulla. Aenean orci. Ut sem leo, placerat quis, ultricies nec, lacinia in, ante. Proin leo elit, dignissim nec, tincidunt dictum, mattis et, arcu.</p> <div class="note" > <p>Morbi faucibus ornare pede. Aenean bibendum pharetra arcu. Vestibulum a quam. Donec commodo ultricies tortor. Nulla mattis fermentum erat. Aliquam at tortor eget velit egestas aliquet. Nam quam.</p> </div>
In style element (`<style type="text/css">`) within head element:
body { background-color: silver; } p { background-color: lime; border: medium solid purple; padding: 0.5em; } #maincontent { background-color: white; } #maincontent p { background-color: yellow; border: medium solid red; } .note p { background-color: olive } .note { background-color: aqua; }
Example 10.9 Rendered:

- With Styles
- Without Styles

## Sample "UA" default stylesheets for HTML 2.0 and HTML 4.0

Take a look at the sample default stylesheets for HTML 2.0 and HTML 4.0 listed in the Appendices of the CSS1 and CSS2 Recommendations.

- Sample style sheet for HTML 2.0 [Local copy]
- Default style sheet for HTML 4.0 [Local copy]

### HTML 4 Sample default CSS

html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre { display: block } li { display: list-item } head { display: none } table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group } td, th { display: table-cell; } caption { display: table-caption } th { font-weight: bolder; text-align: center } caption { text-align: center } body { margin: 8px; line-height: 1.12 } h1 { font-size: 2em; margin: .67em 0 } h2 { font-size: 1.5em; margin: .75em 0 } h3 { font-size: 1.17em; margin: .83em 0 } h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 } h5 { font-size: .83em; margin: 1.5em 0 } h6 { font-size: .75em; margin: 1.67em 0 } h1, h2, h3, h4, h5, h6, b, strong { font-weight: bolder } blockquote { margin-left: 40px; margin-right: 40px } i, cite, em, var, address { font-style: italic } pre, tt, code, kbd, samp { font-family: monospace } pre { white-space: pre } button, textarea, input, object, select { display:inline-block; } big { font-size: 1.17em } small, sub, sup { font-size: .83em } sub { vertical-align: sub } sup { vertical-align: super } table { border-spacing: 2px; } thead, tbody, tfoot { vertical-align: middle } td, th { vertical-align: inherit } s, strike, del { text-decoration: line-through } hr { border: 1px inset } ol, ul, dir, menu, dd { margin-left: 40px } ol { list-style-type: decimal } ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 } u, ins { text-decoration: underline } br:before { content: "\A" } :before, :after { white-space: pre-line } center { text-align: center } abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em } :link, :visited { text-decoration: underline } :focus { outline: thin dotted invert } /* Begin bidirectionality settings (do not change) */ BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override } BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override } *[DIR="ltr"] { direction: ltr; unicode-bidi: embed } *[DIR="rtl"] { direction: rtl; unicode-bidi: embed } @media print { h1 { page-break-before: always } h1, h2, h3, h4, h5, h6 { page-break-after: avoid } ul, ol, dl { page-break-before: avoid } }

### HTML 2 Sample default CSS

BODY { margin: 1em; font-family: serif; line-height: 1.1; background: white; color: black; } H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV, DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR, FORM, DL { display: block } B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP, IMG, SPAN { display: inline } LI { display: list-item } H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em } H5, H6 { margin-top: 1em } H1 { text-align: center } H1, H2, H4, H6 { font-weight: bold } H3, H5 { font-style: italic } H1 { font-size: xx-large } H2 { font-size: x-large } H3 { font-size: large } B, STRONG { font-weight: bolder } /* relative to the parent */ I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic } PRE, TT, CODE, KBD, SAMP { font-family: monospace } PRE { white-space: pre } ADDRESS { margin-left: 3em } BLOCKQUOTE { margin-left: 3em; margin-right: 3em } UL, DIR { list-style: disc } OL { list-style: decimal } MENU { margin: 0 } /* tight formatting */ LI { margin-left: 3em } DT { margin-bottom: 0 } DD { margin-top: 0; margin-left: 3em } HR { border-top: solid } /* 'border-bottom' could also have been used */ A:link { color: blue } /* unvisited link */ A:visited { color: red } /* visited links */ A:active { color: lime } /* active links */ /* setting the anchor border around IMG elements requires contextual selectors */ A:link IMG { border: 2px solid blue } A:visited IMG { border: 2px solid red } A:active IMG { border: 2px solid lime }

## CSS Properties

CSS Level 1 lists 53 properties. Font Properites font-family font-style font-variant font-weight font-size font Color and Background Properties color background-color background-image background-repeat background-attachment background-position background Text Properties word-spacing letter-spacing text-decoration vertical-align text-transform text-align text-indent line-height Box Properties margin-top margin-right margin-bottom margin-left margin padding-top padding-right padding-bottom padding-left padding border-top-width border-right-width border-bottom-width border-left-width border-width border-color border-style border-top border-right border-bottom border-left border width height float clear display Classification Properties white-space list-style-type list-style-image list-style-position list-style | CSS Level 2.1 lists 98 properties . azimuth background-attachment background-color background-image background-position background-repeat background border-collapse border-color border-spacing border-style border-top border-top-color border-top-style border-top-width border-width border bottom caption-side clear clip color content counter-increment counter-reset cue-after cue-before cue cursor direction display elevation empty-cells float font-family font-size font-style font-variant font-weight font height left letter-spacing line-height list-style-image list-style-position list-style-type list-style margin-right margin-top margin max-height max-width min-height min-width orphans outline-color outline-style outline-width outline overflow padding-top padding page-break-after page-break-before page-break-inside pause-after pause-before pause pitch-range pitch play-during position quotes richness right speak-header speak-numeral speak-punctuation speak speech-rate stress table-layout text-align text-decoration text-indent text-transform top unicode-bidi vertical-align visibility voice-family volume white-space widows width word-spacing z-index

## font properties

- font-family
- font-style
- font-variant
- font-weight
- font-size
- font

### font-family

Example 10.10
Example 10.10 Source:
<div style="font-family: garamond, times, serif;" >Garamond, Times, or serif (generic family)</div> <div style="font-family: arial, helvetica, sans-serif;" >Arial, Helvetica or sans-serif (generic family)</div> <div style="font-family: courier, monospace;" >Courier or monospace (generic family)</div> <div style="font-family: fantasy;" >Fantasy (generic family)</div> <div style="font-family: cursive;" >Cursive (generic family)</div>
Example 10.10 Rendered:
Garamond, Times, or serif (generic family)
Arial, Helvetica or sans-serif (generic family)
Courier or monospace (generic family)
Fantasy (generic family)
Cursive (generic family)

### font-style

Example 10.11
Example 10.11 Source:
<div style="font-style: normal;" >Normal font-style</div> <div style="font-style: italic;" >Italic font-style</div> <div style="font-style: oblique;" >Oblique font-style</div>
Example 10.11 Rendered:
Normal font-style
Italic font-style
Oblique font-style

### font-variant

Example 10.12
Example 10.12 Source:
<div style="font-variant: small-caps;" >This should be rendered in small-caps. <div style="font-variant: normal;" >Here we revert to "normal". </div> </div>
Example 10.12 Rendered:
This should be rendered in small-caps.
Here we revert to "normal".

### font-weight

values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Example 10.13
Example 10.13 Source:
<div> font-weight can be used to make things <span style="font-weight: bold" >bold</span>. </div>
Example 10.13 Rendered:
font-weight can be used to make things bold.

## font-size

You can specify font-size by:

- relative sizes (UA)
  - xx-small
  - x-small
  - small
  - medium
  - large
  - x-large
  - xx-large
- relative sizes (context)
  - smaller
  - larger
- relative unit (context)
  - percent (%)
  - em unit
- absolute unit
  - pt

Praesent tincidunt, elit porta elementum pharetra, magna odio consequat nisi, eu iaculis mauris massa eu eros.

By Name:

Example 10.14
Example 10.14 Source:
<p style="font-size: xx-small;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</p> <p style="font-size: x-small;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</p> <p style="font-size: small;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</p> <p style="font-size: medium;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</p> <p style="font-size: large;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</p> <p style="font-size: x-large;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</p> <p style="font-size: xx-large;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</p>
Example 10.14 Rendered:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.

Relative Names:

Example 10.15
Example 10.15 Source:
<div style="font-size: medium" > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</p> <p style="font-size: smaller;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</p> <p style="font-size: larger" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</p> </div>
Example 10.15 Rendered:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.

Relative Units:

Example 10.16
Example 10.16 Source:
<div style="font-size: medium" > <p style="font-size: 80%;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</p> <p style="font-size: 0.75em;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</p> <p style="font-size: 110%;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</p> <p style="font-size: 1.5em;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</p> </div>
Example 10.16 Rendered:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.

Absolute Units:

Example 10.17
Example 10.17 Source:
<p style="font-size: 7pt;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</p> <p style="font-size: 10pt;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</p> <p style="font-size: 14pt" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</p> <p style="font-size: 24pt" >Lorem ipsum dolor sit amet.</p>
Example 10.17 Rendered:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.

Lorem ipsum dolor sit amet.

## Relative vs. Absolute

As a general guideline with CSS, relative measurements are better than absolute measurements.

### Units for Font Sizes

- Relative
  - Relative Sizes (to UA settings): xx-small | x-small | small | medium | large | x-large | xx-large
  - Relative Sizes (to context): larger | smaller
  - Percentage (%)
  - "em" units
- Absolute
  - "pt" sizes (8pt, 10pt, 12pt)

## Relative Sizes and Inheritance

Relative size are relative to parent. Nested `div` elements with `font-size: 85%` and `margin-left: 50px` have properties of:

- 1st `div`:
  - 85% font size
  - 20px left margin
- 2nd `div`:
  - 85% × 85% = 72.25% font size
  - 20px + 20px = 40px left margin
- 3rd `div`:
  - 85% × 85% × 85% = 61.4% font size
  - 20px + 20px + 20px = 60px left margin
- 4th `div`:
  - 85% × 85% × 85% × 85% = 52.2% font size
  - 20px + 20px + 20px + 20px = 80px left margin

Example 10.18
Example 10.18 Source:
<p> Donec in turpis id massa dictum laoreet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras iaculis felis id tellus. Mauris vitae mauris pellentesque nisl accumsan dignissim. </p> <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ultricies vestibulum urna. Phasellus et nibh quis felis semper vehicula. Nam varius enim vitae dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc mollis. <div>Ut urna ante, semper ut, malesuada gravida, vulputate id, lacus. Mauris eu justo mattis nibh tempus dapibus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas adipiscing. Donec turpis odio, interdum vitae, ultrices vel, mattis quis, dui. <div>Nunc non urna nec lorem porta varius. Sed malesuada elit non augue. Vestibulum nec nulla. Aenean orci. Ut sem leo, placerat quis, ultricies nec, lacinia in, ante. Proin leo elit, dignissim nec, tincidunt dictum, mattis et, arcu. <div>Pellentesque non risus quis justo posuere pellentesque. Donec posuere, purus sit amet sollicitudin laoreet, nisl magna ultricies elit, nec condimentum augue elit sit amet erat. Fusce egestas. Nulla vulputate, erat nec tempor mollis, augue metus feugiat urna, id nonummy velit arcu in metus. </div> </div> </div> </div>
In style element (`<style type="text/css">`) within head element:
body {font-size: medium; } div { font-size: 85%; margin-left: 50px; }
Example 10.18 Rendered:

- With Styles
- Without Styles

## font "shorthand" property

In CSS, there are various shorthand properties; these allow you to define several properties in a single place.
`[font-style | font-variant | font-weight ]? font-size[/line-height]? font-family`
Example 10.19
Example 10.19 Source:
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </div>
In style element (`<style type="text/css">`) within head element:
body { font: normal normal normal 12pt/200% arial, helvetica, sans-serif; }
Example 10.19 Rendered:

- With Styles
- Without Styles

## text properties

- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- text-align
- text-indent
- line-height

Example 10.20
Example 10.20 Source:
<div style="width: 30%;" > <p style="text-align: left" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p> <p style="text-align: right" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p> <p style="text-align: justify" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p> <p style="text-align: center" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p></div>
Example 10.20 Rendered:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.

## CSS Units

- Length
  em, pt, ex, mm, cm, in, px
- Percentage
- URL
  url(url goes here)
- Color
  name, rgb value

## Color Units

Wikipedia Web Colors

### Name

As defined in HTML: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua

### RGB Color Space

256 colors in each channel (Red, Green, Blue). Values can be

- decimal numbers (0 to 255)
- hexadecimal numbers (00 to ff)
- percentages (0 to 100%)

The following are all equivalent ways of defining a shade of crimson:

#99000 #900 rgb(153,0,0) rgb(60%,0%,0%) |

Example 10.21
Example 10.21 Source:
<div style="background-color: #990000; color: white; padding: 0.5em; margin: 0.25em; " > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> <div style="background-color: #900; color: white; padding: 0.5em; ; margin: 0.25em;" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> <div style="background-color: rgb(153,0,0); color: white; padding: 0.5em; ; margin: 0.25em;" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> <div style="background-color: rgb(60%,0%,0%); color: white; padding: 0.5em; ; margin: 0.25em;" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div>
Example 10.21 Rendered:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

## Web Palette / Web Safe Colors

Visibone Color Laboratory
Percent
Red | 0% | 20% | 40% | 60% | 80% | 100%
Green | 0% | 20% | 40% | 60% | 80% | 100%
Blue | 0% | 20% | 40% | 60% | 80% | 100%
Hexadecimal
Red | 00 | 33 | 66 | 99 | cc | ff
Green | 00 | 33 | 66 | 99 | cc | ff
Blue | 00 | 33 | 66 | 99 | cc | ff
Decimal
Red | 0 | 51 | 102 | 153 | 204 | 255
Green | 0 | 51 | 102 | 153 | 204 | 255
Blue | 0 | 51 | 102 | 153 | 204 | 255
|  | Web Color Cube

## Block Model

- margin
- border
- padding
- content

Image from Cascading Style Sheets: The Definitive Guide, 3rd ed by Eric Meyer, published by O'Reilly

Firebug visualization of block model (Layout):

## margin, padding, border

- margin
  - margin-top
  - margin-right
  - margin-bottom
  - margin-left
  - margin (shorthand)
- padding
  - padding-top
  - padding-right
  - padding-bottom
  - padding-left
  - padding (shorthand)
- border
  - border-top-width
  - border-right-width
  - border-bottom-width
  - border-left-width
  - border-width
  - border-color
  - border-style
  - border-top
  - border-right
  - border-bottom
  - border-left
  - border

## TRBL for padding and margin shorthand

Stay out of "TRBL" (top right bottom left) for padding and margin shorthand.

p.ex1 {padding: 0.5em 0.25em 0.5em 0.25em;} /* equivalent to... */ p.ex2 {padding: 0.5em 0.25em; }

## border-style

`border` is a shorthand notation that allows you to set `border-width`, `border-style`, `border-color` in one statement.

Example 10.22
Example 10.22 Source:
<div> <h4>Dotted</h4> <p class="border1" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras feugiat mauris facilisis libero. Etiam nisl. Cras est dolor, viverra ac, ultrices volutpat, vestibulum et, odio. Nulla eget libero. Praesent eget tellus vel nibh nonummy egestas. </p> <h4>Dashed</h4> <p class="border2" > Etiam eu arcu quis lectus semper sodales. Donec vitae risus. Integer sollicitudin imperdiet dolor. Donec vehicula. Aliquam ut sapien sed eros imperdiet pharetra. Donec accumsan scelerisque leo. Sed eros nunc, pellentesque et, mollis non, faucibus venenatis, tortor. </p> <h4>Outset</h4> <p class="border3" > Pellentesque a velit. Sed pharetra vestibulum mauris. Ut vel arcu. Cras dolor ligula, eleifend et, ultrices nec, viverra in, ipsum. In convallis pharetra lacus. Etiam tellus. Aliquam quam. Vivamus mattis purus nec quam. </p> <h4>Solid</h4> <p class="border4" > Etiam rhoncus. Praesent id neque et odio dictum varius. Integer imperdiet blandit orci. Donec nec nunc posuere augue egestas accumsan. Nunc nonummy metus ut nunc. In id turpis vitae nisl eleifend bibendum. Curabitur cursus aliquam dolor. </p> <h4>Double</h4> <p class="border5" > Duis id erat a tortor laoreet aliquet. Quisque consectetuer lobortis mauris. Donec pede. Cras non turpis vel tortor iaculis nonummy. Ut facilisis viverra sem. Morbi pretium iaculis ligula. Praesent lectus. Aenean vel ante. </p> <h4>Groove</h4> <p class="border6" > Aliquam leo nunc, congue a, imperdiet eget, aliquet ac, tortor. Sed ac est. Vivamus nisi. Mauris in nisl. Sed ultricies nunc vel nunc. In dignissim consequat arcu. Sed in risus. Nulla facilisi. Integer purus urna, laoreet vitae, congue a, posuere ut, ipsum. </p> <h4>Ridge</h4> <p class="border7" > Vivamus dictum, sem in vulputate vestibulum, est tellus tempus dolor, ut laoreet arcu metus eu orci. Sed enim augue, dignissim sed, porta sed, dapibus ac, nibh. Nunc mattis ipsum eu lectus. </p> <h4>Inset</h4> <p class="border8" > Maecenas consectetuer, lectus ac tempus iaculis, leo ipsum tincidunt erat, et aliquam libero nulla ac ipsum. Nam turpis leo, feugiat vel, nonummy id, ornare a, arcu. Vestibulum porta, justo et ornare porta, neque eros vestibulum libero, semper iaculis augue turpis eu neque. </p> <h4>None</h4> <p class="border9" > Maecenas consectetuer, lectus ac tempus iaculis, leo ipsum tincidunt erat, et aliquam libero nulla ac ipsum. Nam turpis leo, feugiat vel, nonummy id, ornare a, arcu. </p> </div>
In style element (`<style type="text/css">`) within head element:
body { font-family: tahoma,arial,sans-serif; font-size: small; } p { margin: 1em 2em 0.5em 5em; padding: 0.5em 3em; } p { width: 50%; } .border1 { border: thin dotted #900; } .border2 { border: medium dashed #090; } .border3 { border: thick outset #009; } .border4 { border: 3px solid #999; } .border5 { border: 5px double #000; } .border6 { border: 10px groove black; } .border7 { border: 5px ridge black; } .border8 { border: 5px inset #900; } .border9 { border: 5px none #090; }
Example 10.22 Rendered:

- With Styles
- Without Styles

## Margin, Padding, Border Example

Example 10.23
Example 10.23 Source:
<div> <div class="about" > Drafted by Thomas Jefferson between June 11 and June 28, 1776, the Declaration of Independence is at once the nation's most cherished symbol of liberty and Jefferson's most enduring monument.</div> <div> We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. </div> </div>
In style element (`<style type="text/css">`) within head element:
.about { width: 33%; text-align: left; font-size: 0.75em; color: #006600; background: #fefecd; padding: 0.5em; margin: 0.75em; border-width: thin; border-style: dotted; border-color: #900; } body { font-size: large; line-height: 1.5; }
Example 10.23 Rendered:

- With Styles
- Without Styles

## Backgrounds

- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background (a shorthand property)

#### Background Image with CSS

A background image with CSS:

Example 10.24
Example 10.24 Source:
<div style="margin-left: 45%; margin-right: 45%;" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </div>
In style element (`<style type="text/css">`) within head element:
body { background-image: url(images/shield-background.gif);}
Example 10.24 Rendered:

- With Styles
- Without Styles

#### Repeat

Repeat on y-axis only:

Example 10.25
Example 10.25 Source:
<div style="margin-left: 45%; margin-right: 45%;" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </div>
In style element (`<style type="text/css">`) within head element:
body { background-image: url(images/shield-background.gif); background-repeat: repeat-y; }
Example 10.25 Rendered:

- With Styles
- Without Styles

#### Center and Fix

Center, Don't Repeat and Fix position:

Example 10.26
Example 10.26 Source:
<div style="margin-left: 45%; margin-right: 45%;" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </div>
In style element (`<style type="text/css">`) within head element:
body { background-image: url(images/shield-background.gif); background-repeat: no-repeat; background-position: center; background-attachment: fixed; }
Example 10.26 Rendered:

- With Styles
- Without Styles

## Backgrounds aren't just for the "body"

Here we use the following images as backgrounds in `div` elements.

wood.jpg | marble.jpg | water.jpg

Example 10.27
Example 10.27 Source:
<div class="wood" > Wood <div class="marble" > Marble <div class="water" > Water </div> </div> </div>
In style element (`<style type="text/css">`) within head element:
body { font-size: 18pt; font-weight: bold; color: white;} div.wood { padding: 1em; background-image: url(images/wood.jpg); } div.marble { background-image: url(images/marble.jpg); padding: 1em; } div.water { background-image: url(images/water.jpg); padding: 1em; }
Example 10.27 Rendered:

- With Styles
- Without Styles

## Backgrounds aren't just for the "body"

Instead of having an `img` element within the XHTML, we can include design images in the CSS. This example displays the flag.png with the h1 of the markup.

Example 10.28
Example 10.28 Source:
<div id="ustitle" > <h1>United States Constitution</h1> </div> <div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan ipsum et libero. Donec tincidunt. Duis non nulla a tortor sagittis bibendum. Nunc ante. Vestibulum vulputate. Aliquam ultricies, est vitae mattis ornare, leo pede lacinia mi, vitae pharetra turpis enim sed turpis. Mauris lorem. Ut rhoncus. Fusce congue ultricies est. Nulla dignissim sagittis ipsum. Vivamus eu lectus non enim dignissim imperdiet. Nulla facilisi. Integer euismod cursus erat. </div>
In style element (`<style type="text/css">`) within head element:
div#ustitle { height: 80px; background: #ddd url(images/flag-small.png) left center no-repeat; margin-bottom: 0.5em; } #ustitle h1 { padding-top: 0.5em; text-align: center; font-family: tahoma,arial,helvetica,sans-serif; }
Example 10.28 Rendered:

- With Styles
- Without Styles

## Backgrounds: use tiling and image size

The image (5px × 150px; 254 bytes):

"Normal" size:

"Increased +4":

Example 10.29
Example 10.29 Source:
<table id="stats" > <tr><th rowspan="1" colspan="1" >Year</th><th rowspan="1" colspan="1" >Championship game</th><th rowspan="1" colspan="1" >Score</th></tr> <tr><td rowspan="1" colspan="1" >2008</td><td rowspan="1" colspan="1" >Kansas def. Memphis</td><td rowspan="1" colspan="1" >75-68</td></tr> <tr><td rowspan="1" colspan="1" >2007</td><td rowspan="1" colspan="1" >Florida def. Ohio State</td><td rowspan="1" colspan="1" >84-75</td></tr> <tr><td rowspan="1" colspan="1" >2006</td><td rowspan="1" colspan="1" >Florida def. UCLA</td><td rowspan="1" colspan="1" >73-57</td></tr> <tr><td rowspan="1" colspan="1" >2005</td><td rowspan="1" colspan="1" >UNC def. Illinois</td><td rowspan="1" colspan="1" >75-70</td></tr> <tr><td rowspan="1" colspan="1" >2004</td><td rowspan="1" colspan="1" >UConn def. Georgia Tech</td><td rowspan="1" colspan="1" >82-73</td></tr> <tr><td rowspan="1" colspan="1" >2003</td><td rowspan="1" colspan="1" >Syracuse def. Kansas</td><td rowspan="1" colspan="1" >81-78</td></tr> <tr><td rowspan="1" colspan="1" >2002</td><td rowspan="1" colspan="1" >Maryland def. Indiana</td><td rowspan="1" colspan="1" >64-52</td></tr> <tr><td rowspan="1" colspan="1" >2001</td><td rowspan="1" colspan="1" >Duke def. Arizona</td><td rowspan="1" colspan="1" >82-72</td></tr> <tr><td rowspan="1" colspan="1" >2000</td><td rowspan="1" colspan="1" >Michigan State def. Florida</td><td rowspan="1" colspan="1" >89-76</td></tr> <tr><td rowspan="1" colspan="1" >1999</td><td rowspan="1" colspan="1" >UConn def. Duke</td><td rowspan="1" colspan="1" >77-74</td></tr> <tr><td rowspan="1" colspan="1" >1998</td><td rowspan="1" colspan="1" >Kentucky def. Utah</td><td rowspan="1" colspan="1" >78-69 </td></tr> </table>
In style element (`<style type="text/css">`) within head element:
#stats th { background-image: url(images/gradient-blue.png); background-repeat: repeat-x; background-position: bottom; padding: 0.25em; } #stats td { border-bottom: thin dotted black; padding: 0.25em; } table { border-collapse: collapse; border: thin solid black; }
Example 10.29 Rendered:

- With Styles
- Without Styles

## Minuteman

Image as a fixed background for the "body". Alternate versions of the image for the "header" and "main" content areas of the page.

The three images:

Rendered in a browser:

Example 10.30
Example 10.30 Source:
<div id="header" > <h1>The Concord Hymn</h1> <h2>Ralph Waldo Emerson (1837)</h2> </div> <div id="main" > <p> By the rude bridge that arched the flood, <br/> Their flag to April's breeze unfurled; <br/> Here once the embattled farmers stood; <br/> And fired the shot heard round the world. </p> <p> The foe long since in silence slept; <br/> Alike the conqueror silent sleeps, <br/> And Time the ruined bridge has swept <br/> Down the dark stream that seaward creeps. </p> <p> On this green bank, by this soft stream, <br/> We place with joy a votive stone, <br/> That memory may their deeds redeem, <br/> When, like our sires, our sons are gone. </p> <p> O Thou who made those heroes dare <br/> To die, and leave their children free, -- <br/> Bid Time and Nature gently spare <br/> The shaft we raised to them and Thee. </p> </div>
In style element (`<style type="text/css">`) within head element:
body { background: #638f29 url(images/minuteman.jpg) 0in -1.25in fixed no-repeat; } #main { background: url(images/minuteman-light.jpg) 0in -1.25in fixed no-repeat; font-family: Times,serif; font-size: x-large; font-weight: bold; line-height: 1.75em; margin-left: 25px; padding: 10px; width: 470px; } #header { background: url(images/minuteman-dark.jpg) 0in -1.25in fixed no-repeat; color: white; font-family: Times, serif; margin-left: 25px; padding: 10px; width: 470px; }
Example 10.30 Rendered:

- With Styles
- Without Styles

## Pseudo-Classes and Elements

CSS 2.1 defines these pseudo-classes and pseudo-elements. Examples are `p:first-line`, `ul:first-child`, and `input:focus`

Pseudo-Classes | Pseudo-Elements
--- | ---
first-child link visited hover active focus lang | first-line first-letter before after

## Pseudo Elements

`first-letter` pseudo element.

Example 10.31
Example 10.31 Source:
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p>
In style element (`<style type="text/css">`) within head element:
p:first-letter { font-size: 400%; }
Example 10.31 Rendered:

- With Styles
- Without Styles

`first-line` pseudo element

Example 10.32
Example 10.32 Source:
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p>
In style element (`<style type="text/css">`) within head element:
p:first-line { font-variant: small-caps; }
Example 10.32 Rendered:

- With Styles
- Without Styles

Opening paragraph with first-letter pseudo element.

Example 10.33
Example 10.33 Source:
<p class="opener" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p>
In style element (`<style type="text/css">`) within head element:
p.opener:first-letter { font-size: 400%; float: left; }
Example 10.33 Rendered:

- With Styles
- Without Styles

## Pseudo Classes

- a:link
- a:visited
- a:hover
- a:active

Example 10.34
Example 10.34 Source:
<div><a href="http://www.npr.org/" shape="rect" >National Public Radio</a></div> <div><a href="http://www.cnn.com/" shape="rect" >Cable Network News</a></div> <div><a href="http://www.foxnews.com/" shape="rect" >Fox News</a></div> <div><a href="http://www.abcnews.com/" shape="rect" >ABC News</a></div> <div><a href="http://www.economist.com/" shape="rect" >The Economist</a></div>
In style element (`<style type="text/css">`) within head element:
div {margin: 0.5em; } a {margin: 0.25em; padding: 0.25em;} a:link { text-decoration: none; color: blue; background-color: white; } a:visited { text-decoration: none; color: green; background-color: silver; } a:hover { text-decoration: none; color: white; background-color: blue; } a:active { text-decoration: underline; color: red; background-color: yellow; }
Example 10.34 Rendered:

- With Styles
- Without Styles

## Class Names

You can choose class names when authoring your CSS and XHTML. A good rule is to create "logical" class names and not "descriptive" ones. Remember, you've gone to the trouble of separating markup and presentation -- keep this separation when creating class names.

If you can guess how the class is styled based upon the name, this should cause you to consider changing the name.

Good Class/ID Names | Poor Class Names
--- | ---
globalnav sitenav gallery imgcaption aside warning | thinborder rightcolumn rightnav redbold center

Choosing class and id names appropriately will help with:

- evolution
  Your `#rightnav` may very well become navigation positioned on the left side or the top.
  Your `.redbold` may very be changed to another color or background entirely.
- specificity and semantics
  If you have a `.dottedborder` class, you may wish to change how your thumbnail images are styled, but leave presentation of other markup that you've given the same class to unchanged.

See: Choosing Class and ID Names

## Float

Float takes the block out of the flow of the containing block and moves it (right or left) within the containing block.

`float: none` | `float: right`

Example 10.35
Example 10.35 Source:
<p><img src="images/777-t-1.jpg" alt="777" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus. Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p>
In style element (`<style type="text/css">`) within head element:
img { float: right; border: thin dotted black; padding: 5px; }
Example 10.35 Rendered:

- With Styles
- Without Styles

## Float and Clear

The "clear" property defines the sides of a block where floated blocks cannot occur.

`float: right; clear: none`
`float: right; clear: right`

Example 10.36
Example 10.36 Source:
<p><img src="images/777-t-1.jpg" alt="777" /> <img src="images/777-t-2.jpg" alt="777" /> <img src="images/777-t-3.jpg" alt="777" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus. Suspendisse mollis leo nec diam. pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh. Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Nulla vulputate, erat nec tempor mollis, augue metus feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede non convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna. Maecenas aliquam arcu ac turpis. </p>
In style element (`<style type="text/css">`) within head element:
img { float: right; clear: right; border: thin dotted black; padding: 5px; margin: 5px; } p {line-height: 1.5em;}
Example 10.36 Rendered:

- With Styles
- Without Styles

## Float and Clear

The "clear" property defines the sides of a block where floated blocks cannot occur.

`clear: none`
`clear: right`

Example 10.37
Example 10.37 Source:
<p><img src="images/777-t-1.jpg" alt="777" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.</p> <p><img src="images/777-t-2.jpg" alt="777" />Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p> <p><img src="images/777-t-3.jpg" alt="777" />Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Nulla vulputate, erat nec tempor mollis, augue metus feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede non convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna. Maecenas aliquam arcu ac turpis. </p>
In style element (`<style type="text/css">`) within head element:
p { clear: right; line-height: 1.5em; } img { float: right; border: thin dotted black; padding: 5px; }
Example 10.37 Rendered:

- With Styles
- Without Styles

## Float

### Float: right

Example 10.38
Example 10.38 Source:
<div> <div class="about" >Drafted by Thomas Jefferson between June 11 and June 28, 1776, the Declaration of Independence is at once the nation's most cherished symbol of liberty and Jefferson's most enduring monument.</div> <div> We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. </div> </div>
In style element (`<style type="text/css">`) within head element:
.about { float: right; width: 33%; text-align: left; font-size: 0.75em; color: #006600; background: #fefecd; padding: 0.5em; margin: 0.75em; border-width: thin; border-style: dotted; border-color: #900; } body { font-size: large; line-height: 1.5; }
Example 10.38 Rendered:

- With Styles
- Without Styles

### Float: left

Example 10.39
Example 10.39 Source:
<div> <div class="about" >Drafted by Thomas Jefferson between June 11 and June 28, 1776, the Declaration of Independence is at once the nation's most cherished symbol of liberty and Jefferson's most enduring monument.</div> <div> We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty, and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed. That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness. </div> </div>
In style element (`<style type="text/css">`) within head element:
.about { float: left; width: 33%; text-align: left; font-size: 0.75em; color: #006600; background: #fefecd; padding: 0.5em; margin: 0.75em; border-width: thin; border-style: dotted; border-color: #900; } body { font-size: large; line-height: 1.5; }
Example 10.39 Rendered:

- With Styles
- Without Styles

## Float Opposite

Use `float: left` and `float: right` for content to be on opposite sides.

Example 10.40
Example 10.40 Source:
<div class="footer" > <p class="course" > <a href="http://cscie12.dce.harvard.edu/" shape="rect" >CSCI E-12 Home</a> | <a href="mailto:cscie12@fas.harvard.edu" shape="rect" >cscie12@fas.harvard.edu</a> </p> <p class="global" > <a href="http://www.harvard.edu/" shape="rect" >Harvard</a> | <a href="http://www.dce.harvard.edu/" shape="rect" >DCE</a> </p> </div>
In style element (`<style type="text/css">`) within head element:
div.footer { background-color: #ccf; border-top: thin solid #333; } div.footer p.course { float: left; } div.footer p.global { float: right; } div.footer p { padding: 0.25em 2em 0.25em 2em; font-size: small; } div.footer a:link, div.footer a:visited, div.footer a:hover, div.footer a:active { text-decoration: none; color: navy; font-weight: bold; padding: 0.25em; } div.footer a:hover { color: #ccf; background-color: navy; }
Example 10.40 Rendered:

- With Styles
- Without Styles

The background color of the parent `div` did not display. The content of this `div` has been "floated," therefore it has been removed from the calculation of its box model. The parent `div` size is null. Solution: float the parent `div`. Recall that a float is always with respect to the containing box.

Example 10.41
Example 10.41 Source:
<div class="footer" > <p class="course" > <a href="http://cscie12.dce.harvard.edu/" shape="rect" >CSCI E-12 Home</a> | <a href="mailto:cscie12@fas.harvard.edu" shape="rect" >cscie12@fas.harvard.edu</a> </p> <p class="global" > <a href="http://www.harvard.edu/" shape="rect" >Harvard</a> | <a href="http://www.dce.harvard.edu/" shape="rect" >DCE</a> </p> </div>
In style element (`<style type="text/css">`) within head element:
div.footer { background-color: #ccf; float: left; border-top: thin solid #333; } div.footer p.course { float: right; } div.footer p.global { float: left; } div.footer p { padding: 0.25em 2em 0.25em 2em; font-size: small; } div.footer a:link, div.footer a:visited, div.footer a:hover, div.footer a:active { text-decoration: none; color: navy; font-weight: bold; padding: 0.25em; } div.footer a:hover { color: #ccf; background-color: navy; }
Example 10.41 Rendered:

- With Styles
- Without Styles

## Float and Margins

We want to float one element left, the other right. We want content to be between the floated elements.

Example 10.42
Example 10.42 Source:
<p class="first" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.</p> <p class="second" >Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p> <p>Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Nulla vulputate, erat nec tempor mollis, augue metus feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede non convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna. Maecenas aliquam arcu ac turpis. Ut pellentesque porta turpis. n vitae erat. Nam lacinia imperdiet lorem. Aliquam ullamcorper ultrices dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin quis orci eu erat molestie varius. Praesent condimentum orci in lectus. Ut ipsum. In hac habitasse platea dictumst. </p>
In style element (`<style type="text/css">`) within head element:
p.first { float: left; width: 30%; font-size: x-small; } p.second { float: right; width: 30%; font-size: x-small; }
Example 10.42 Rendered:

- With Styles
- Without Styles

Make the middle content not wrap around the floated contents (set margin for the middle content).

Example 10.43
Example 10.43 Source:
<p class="first" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.</p> <p class="second" >Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p> <p class="third" >Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Nulla vulputate, erat nec tempor mollis, augue metus feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede non convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna. Maecenas aliquam arcu ac turpis. Ut pellentesque porta turpis.n vitae erat. Nam lacinia imperdiet lorem. Aliquam ullamcorper ultrices dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin quis orci eu erat molestie varius. Praesent condimentum orci in lectus. Ut ipsum. In hac habitasse platea dictumst. </p>
In style element (`<style type="text/css">`) within head element:
p.first { float: left; width: 30%; font-size: x-small; } p.second { float: right; width: 30%; font-size: x-small; } p.third { margin-left: 35%; margin-right: 35%; }
Example 10.43 Rendered:

- With Styles
- Without Styles

## Float and a Flexible "Grid"

Here each "program" is wrapped in a `div`, which contains a thumbnail and a caption. The `div` elements are sized (height and width set) and floated. The result is a table-like layout that is flexible for varying widths of the browser window.

### Harvard at Home Programs

### Congress

## Float and a Flexible "Grid"

It is important to set height and width !

Without setting height and width:

Setting height and width:

Example 10.44
Example 10.44 Source:
<div id="gallery" > <div><img src="images/777-t-1.jpg" alt="777" /><br/>Boeing 777</div> <div><img src="images/777-t-2.jpg" alt="777" /><br/>Boeing 777</div> <div><img src="images/777-t-3.jpg" alt="777" /><br/>Boeing 777</div> <div><img src="images/777-t-4.jpg" alt="777" /><br/>Boeing 777</div> <div><img src="images/777-t-5.jpg" alt="777" /><br/>Boeing 777</div> <div><img src="images/777-t-6.jpg" alt="777" /><br/>Boeing 777</div> <div><img src="images/787-t-1.jpg" alt="777" /><br/>Boeing 787 Dreamliner</div> <div><img src="images/787-t-2.jpg" alt="777" /><br/>Boeing 787 Dreamliner</div> <div><img src="images/bbj-t-1.jpg" alt="777" /><br/>Boeing Business Jet</div> </div>
In style element (`<style type="text/css">`) within head element:
#gallery div { float: left; width: 150px; height: 150px; padding: 5x; border: thin dotted #ccc; margin: 5px; text-align: center; font-size: x-small; } #gallery div img { padding-top: 5px; } body { font-family: arial,helvetica,sans-serif; }
Example 10.44 Rendered:

- With Styles
- Without Styles

## Display: none

Can use CSS to turn off display. This will be especially useful to manipulate CSS properties with JavaScript.

Full list for the American League:

With ALE and ALW display set to "none":

Example 10.45
Example 10.45 Source:
<ul> <li>American League <ul> <li id="ale" >East <ul> <li>Baltimore</li> <li>Boston</li> <li>New York</li> <li>Toronto</li> <li>Tampa Bay</li> </ul> </li> <li id="alc" >Central <ul> <li>Chicago</li> <li>Cleveland</li> <li>Detroit</li> <li>Kansas City</li> <li>Minnesota</li> </ul> </li> <li id="alw" >West <ul> <li>Los Angeles</li> <li>Oakland</li> <li>Texas</li> <li>Seattle</li> </ul> </li> </ul> </li> </ul>
In style element (`<style type="text/css">`) within head element:
#ale { display: none; } #alw { display: none; } * { font-family: arial,helvetica,sans-serif; }
Example 10.45 Rendered:

- With Styles
- Without Styles

## Lists

- list-style-type
  - disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
- list-style-image
- list-style-position
- list-style
  a shorthand property

### Ordered List

An ordered list:

Example 10.46
Example 10.46 Source:
<strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong> <ol class="basketball" > <li>Mark Few</li> <li>Roy Williams</li> <li>Bruce Pearl</li> <li>Thad Matta</li> <li>Bo Ryan</li> <li>Mike Krzyzewski</li> <li>Jim Boeheim</li> <li>Bob Huggins</li> <li>Lute Olson</li> <li>Tubby Smith</li> </ol>
In style element (`<style type="text/css">`) within head element:
ol.basketball { list-style: upper-roman; }
Example 10.46 Rendered:

- With Styles
- Without Styles

## Lists with Image

And now, let's add a basketball icon as a list bullet (image is at images/basketball.gif,

An unordered list controlled by CSS:

Example 10.47
Example 10.47 Source:
<div class="basketball" > <strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong> <ul class="basketball" > <li>Mark Few</li> <li>Roy Williams</li> <li>Bruce Pearl</li> <li>Thad Matta</li> <li>Bo Ryan</li> <li>Mike Krzyzewski</li> <li>Jim Boeheim</li> <li>Bob Huggins</li> <li>Lute Olson</li> <li>Tubby Smith</li> </ul> </div>
In style element (`<style type="text/css">`) within head element:
ul.basketball { list-style-image: url(images/basketball.gif); }
Example 10.47 Rendered:

- With Styles
- Without Styles

## Doing this without CSS

How to accomplish this without CSS.

Example 10.48
Example 10.48 Source:
<p>Achieving the same effect using HTML and the IMG element (look at the source to see the difference between this and the CSS way):</p> <div> <strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong><br/> <img src="images/basketball.gif" alt="*" />Mark Few<br/> <img src="images/basketball.gif" alt="*" />Roy Williams<br/> <img src="images/basketball.gif" alt="*" />Bruce Pearl<br/> <img src="images/basketball.gif" alt="*" />Thad Matta<br/> <img src="images/basketball.gif" alt="*" />Bo Ryan<br/> <img src="images/basketball.gif" alt="*" />Mike Krzyzewski<br/> <img src="images/basketball.gif" alt="*" />Jim Boeheim<br/> <img src="images/basketball.gif" alt="*" />Bob Huggins<br/> <img src="images/basketball.gif" alt="*" />Lute Olson<br/> <img src="images/basketball.gif" alt="*" />Tubby Smith<br/> </div>
In style element (`<style type="text/css">`) within head element:
/* no css rules */
Example 10.48 Rendered:

- With Styles
- Without Styles

For the complete list: NCAA Men's Basketball Statistics

## Lists without list-style

Example 10.49
Example 10.49 Source:
<ul> <li>Big XII</li> <li>Ivy League</li> <li>Pac 10</li> </ul>
Example 10.49 Rendered:

- Big XII
- Ivy League
- Pac 10

Example 10.50
Example 10.50 Source:
<ul id="conferences" > <li>Big XII</li> <li>Ivy League</li> <li>Pac 10</li> </ul>
In style element (`<style type="text/css">`) within head element:
ul#conferences { list-style: none; }
Example 10.50 Rendered:

- With Styles
- Without Styles

## Display List Items "Inline"

Unordered List | Inline List Items | Inline List Items

Example 10.51
Example 10.51 Source:
<ul id="conferences" > <li>Big XII</li> <li>Ivy League</li> <li>Pac 10</li> </ul>
In style element (`<style type="text/css">`) within head element:
ul#conferences { list-style: none; } ul#conferences li { display: inline; }
Example 10.51 Rendered:

- With Styles
- Without Styles

Example 10.52
Example 10.52 Source:
<ul id="conferencenav" > <li><a href="http://big12sports.collegesports.com/" shape="rect" >Big XII</a></li> <li><a href="http://www.ivyleaguesports.com/" shape="rect" >Ivy League</a></li> <li><a href="http://www.pac-10.org/" shape="rect" >Pac 10</a></li> </ul>
In example52.css
ul#conferencenav { list-style: none; padding-bottom: 0.5em; border-bottom: 2px solid black; font-weight: bold; font-family: Arial, Verdana, Helvetica, sans-serif; color: #990000; } ul#conferencenav li { display: inline; margin: 0; } ul#conferencenav a{ padding: 0.5em 1em; margin-right: 0.25em; background-color: #dddd00; border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black; text-decoration: none; } ul#conferencenav a:link, ul#conferencenav a:visited { color: #990000; } ul#conferencenav a:hover { color: #dddd00; background-color: #990000; }
In head element:
<link rel="stylesheet" type="text/css" href="example52.css"/>
Example 10.52 Rendered:

- With Styles
- Without Styles

Inspired by: CSS Cookbook by Christopher Schmitt

## Lists as Navigation

Default styling:

As navigation:

Example 10.53
Example 10.53 Source:
<div id="navlhs" > <ul> <li><a href="http://www.baylor.edu/" shape="rect" >Baylor</a></li> <li><a href="http://www.cu.edu/" shape="rect" >Colorado</a></li> <li><a href="http://www.iastate.edu/" shape="rect" >Iowa State</a></li> <li><a href="http://www.ku.edu/" shape="rect" >Kansas</a></li> <li><a href="http://www.ksu.edu/" shape="rect" >Kansas State</a></li> <li><a href="http://www.missouri.edu/" shape="rect" >Missouri</a></li> <li><a href="http://www.unl.edu/" shape="rect" >Nebraska</a></li> <li><a href="http://www.ou.edu/" shape="rect" >Oklahoma</a></li> <li><a href="http://www.okstate.edu/" shape="rect" >Oklahoma State</a></li> <li><a href="http://www.utexas.edu/" shape="rect" >Texas</a></li> <li><a href="http://www.tamu.edu/" shape="rect" >Texas A&M</a></li> <li><a href="http://www.ttu.edu/" shape="rect" >Texas Tech</a></li> </ul> </div>
In example53.css
#navlhs { font-family: Arial, Verdana, Helvetica, sans-serif; font-weight: bold; font-size: 0.7em; width: 15em; border-right: 1px solid #333; margin-bottom: 1em; background-color: #ddd; color: #900; } #navlhs ul { list-style: none; margin: 0; padding: 0; } #navlhs ul li { margin: 0; border-top: 1px solid #333; } #navlhs ul li a { display: block; background-color: #ddd; border-top: 1px solid #333; border-left: 5px solid #333; text-decoration: none; padding: 2px 2px 2px 0.5em; } #navlhs a:link, #navlhs a:visited { color: #900; } #navlhs a:hover { color: #fff; background-color: #900; }
In head element:
<link rel="stylesheet" type="text/css" href="example53.css"/>
Example 10.53 Rendered:

- With Styles
- Without Styles

Inspired by: CSS Cookbook by Christopher Schmitt

## Lists as Navigation

Default styling of nested list:

Nested list styled as clamshell navigation:

Example 10.54
Example 10.54 Source:
<div id="navlhs" > <ul> <li><a href="http://big12sports.collegesports.com/" shape="rect" >Big XII</a> <ul> <li><a href="http://www.baylor.edu/" shape="rect" >Baylor</a></li> <li><a href="http://www.cu.edu/" shape="rect" >Colorado</a></li> <li><a href="http://www.iastate.edu/" shape="rect" >Iowa State</a></li> <li><a href="http://www.ku.edu/" shape="rect" >Kansas</a></li> <li><a href="http://www.ksu.edu/" shape="rect" >Kansas State</a></li> <li><a href="http://www.missouri.edu/" shape="rect" >Missouri</a></li> <li><a href="http://www.unl.edu/" shape="rect" >Nebraska</a></li> <li><a href="http://www.ou.edu/" shape="rect" >Oklahoma</a></li> <li><a href="http://www.okstate.edu/" shape="rect" >Oklahoma State</a></li> <li><a href="http://www.utexas.edu/" shape="rect" >Texas</a></li> <li><a href="http://www.tamu.edu/" shape="rect" >Texas A&M</a></li> <li><a href="http://www.ttu.edu/" shape="rect" >Texas Tech</a></li> </ul> </li> <li><a href="http://www.ivyleaguesports.com/" shape="rect" >Ivy League</a> <ul class="collapse" > <li><a href="http://www.brown.edu/" shape="rect" >Brown</a></li> <li><a href="http://www.columbia.edu/" shape="rect" >Columbia</a></li> <li><a href="http://www.cornell.edu/" shape="rect" >Cornell</a></li> <li><a href="http://www.dartmouth.edu/" shape="rect" >Dartmouth</a></li> <li><a href="http://www.harvard.edu/" shape="rect" >Harvard</a></li> <li><a href="http://www.upenn.edu/" shape="rect" >Penn</a></li> <li><a href="http://www.princeton.edu/" shape="rect" >Princeton</a></li> <li><a href="http://www.yale.edu/" shape="rect" >Yale</a></li> </ul> </li> <li><a href="http://www.pac-10.org/" shape="rect" >Pac 10</a> <ul class="collapse" > <li><a href="http://www.arizona.edu/" shape="rect" >Arizona</a></li> <li><a href="http://www.asu.edu/" shape="rect" >Arizona State</a></li> <li><a href="http://www.berkeley.edu/" shape="rect" >California</a></li> <li><a href="http://www.uoregon.edu/" shape="rect" >Oregon</a></li> <li><a href="http://www.oregonstate.edu/" shape="rect" >Oregon State</a></li> <li><a href="http://www.stanford.edu/" shape="rect" >Stanford</a></li> <li><a href="http://www.ucla.edu/" shape="rect" >UCLA</a></li> <li><a href="http://www.usc.edu/" shape="rect" >USC</a></li> <li><a href="http://www.washington.edu/" shape="rect" >Washington</a></li> <li><a href="http://www.wsu.edu/" shape="rect" >Washington State</a></li> </ul> </li> </ul> </div>
In example54.css
#navlhs { font-family: Arial, Verdana, Helvetica, sans-serif; font-weight: bold; font-size: 0.7em; width: 10em; border-right: 1px solid #333; margin-bottom: 1em; background-color: #ddd; color: #900; } #navlhs ul { list-style: none; margin: 0; padding: 0; } #navlhs ul li { margin: 0; border-top: 1px none #333; } #navlhs ul li a { display: block; background-color: #ccc; border-top: 1px none #333; border-right: 1px solid #333; border-bottom: thin dotted #333; border-left: 5px solid #333; text-decoration: none; padding: 2px 2px 2px 0.5em; } #navlhs a:link { color: #900; } #navlhs a:visited { color: #900; } #navlhs a:hover { color: #fff; background-color: #900; border-top: 1px outset #333; border-right: 1px outset #333; border-bottom: 1px outset #333; border-left: 5px outset #333; } #navlhs a:active { color: #fff; background-color: #900; border-top: 1px inset #333; border-right: 1px inset #333; border-bottom: 1px inset #333; border-left: 5px inset #333; } #navlhs ul ul a { list-style: none; padding-left: 1.5em; font-size: 80%; font-weight: normal; } #navlhs ul.collapse { display: none; }
In head element:
<link rel="stylesheet" type="text/css" href="example54.css"/>
Example 10.54 Rendered:

- With Styles
- Without Styles

Inspired by: CSS Cookbook by Christopher Schmitt

## Breadcrumb Navigation

> "Just wait, Gretel, until the moon rises, and then we shall see the crumbs of bread which I have strewn about, they will show us our way home again.", Hansel in Hansel and Gretel

Markup "breadcrumb" navigation using nested lists so that markup reflects the parent/child or hierarchy relationship.

Strategy is similar to that of creating tabs. Use "display: inline" to make list items inline; use background image for "li" to show arrow.

Example 10.55
Example 10.55 Source:
<div id="breadcrumb" > <ul> <li> <a href="http://dmoz.org/" shape="rect" >Top</a> <ul> <li> <a href="http://dmoz.org/Science/" shape="rect" >Science</a> <ul> <li> <a href="http://dmoz.org/Science/Biology/" shape="rect" >Biology</a> <ul> <li> <a href="http://dmoz.org/Science/Biology/Genetics/" shape="rect" > Genetics</a> <ul> <li> <a href="http://dmoz.org/Science/Biology/Genetics/Genomics/" shape="rect" > Genomics</a> <ul> <li> <span>Pharmacogenetics</span> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div>
In example55.css
/* Order of pseudo-"a" elements: LoVe HAte (Link, Visited, Hover, Active */ #breadcrumb a:link , #breadcrumb a:visited , #breadcrumb a:hover , #breadcrumb a:active , #breadcrumb li span { color: navy; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: small; font-weight: normal; padding: 0.5em; text-decoration: none; } #breadcrumb a:hover { text-decoration: underline; } #breadcrumb li span { color: black; } #breadcrumb { background-color: #ddd; } #breadcrumb ul { display: inline; margin-left: 0; padding-left: 0; } #breadcrumb ul li { display: inline; } #breadcrumb ul ul li { background-image: url(images/arrow.gif); background-position: left; background-repeat: no-repeat; padding-left: 25px; }
In head element:
<link rel="stylesheet" type="text/css" href="example55.css"/>
Example 10.55 Rendered:

- With Styles
- Without Styles

## media selector

CSS2 defines a media selector for different media types.

Incorporate as part of the "link" element:

<link rel="stylesheet" type="text/css" media="all" href="screen.css" /> <link rel="stylesheet" type="text/css" media="print" href="print.css" />

Or, use "@media" selector in style rule:

@media print { body { font-size: 10pt; } } @media screen { body { font-size: 12pt; } } @media print { div.navigation { display: none; } hr { page-break-after: always; } }

all
  Suitable for all devices.
braille
  Intended for braille tactile feedback devices.
embossed
  Intended for paged braille printers.
handheld
  Intended for handheld devices (typically small screen, limited bandwidth).
print
  Intended for paged material and for documents viewed on screen in print preview mode.
projection
  Intended for projected presentations, for example projectors.
screen
  Intended primarily for color computer screens.
speech
  Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose.
tty
  Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities).
tv
  Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

## Harvard College Funding Database

<link rel="stylesheet" type="text/css" media="all" href="screen.css" /> <link rel="stylesheet" type="text/css" media="print" href="print.css" />

Screen display (screen.css):

Print display (print.css):

## Print CSS

CSS Print Profile deals with paged media.

The book Cascading Style Sheets : Designing for the Web (3rd Edition) by Hakon Wium Lie and Bert Bos was printed using CSS.

See A List Apart: Articles: Printing a Book with CSS: Boom!

## Yahoo! UI (YUI) Library

- Yahoo! User Interface Library

  > The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD license and are free for all uses.

- YUI CSS
  - CSS Reset (neutralizes browser CSS styles)
  - CSS Base (applies consistent style foundation for common elements)
  - CSS Fonts (foundation for typography and font-sizing)
  - CSS Grids (more than 1,000 CSS-driven wireframes in a 4KB file)

## YUI Grid Example

- YUI Grid Examples
- Special Nesting Grid E: 3/4 - 1/4

Grid: 4 areas:

- header
- body - A - 3/4
- body B - 1/4
- footer

Note the use of "reset-fonts-grids.css", which gives you a blank slate for styles (overrides UA stylsheet for font sizes, margins, padding, etc.)

<html> <head> <title>Grids CSS Example - YUI Grids - Special Nesting Grid E: 3/4 - 1/4</title> <link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css"> </head> <body> <!-- the id on the containing div determines the page width. --> <!-- #doc = 750px; #doc2 = 950px; #doc3 = 100%; #doc4 = 974px --> <div id="doc"> <div id="hd"> <p>Header - Lorem ipsum dolor sit amet...</p> </div> <div id="bd"> <!-- Use Standard Nesting Grids and Special Nesting Grids to subdivid regions of your layout. --> <!-- Special Nesting Grid E has two children, the first is 3/4, the second is 1/4 --> <div class="yui-ge"> <!-- the first child of a Grid needs the "first" class --> <div class="yui-u first"> <p>A - Lorem ipsum dolor sit amet, ...</p> </div> <div class="yui-u"> <p>B - Lorem ipsum dolor sit amet, ...</p> </div> </div> </div> <div id="ft"> <p>Footer - Lorem ipsum dolor sit amet, ...</p> </div> </div> </body> </html>

## Harvard Homepage Markup/Style Makeover

Harvard Home Page

Tables exposed:

### Markup and Page Stats

Markup Type | HTML 4.01 Transitional 53 validation errors
Markup Size | 26.1 k
Markup (after 'tidy') | 380 lines
Document dependencies | 1 HTML 48 images
Total page weight | 226 k
Elements | 314 total
a | 60
b | 15
body | 1
br | 9
center | 2
div | 1
font | 10
head | 1
hr | 6
html | 1
img | 61
meta | 3
p | 9
script | 1
table | 16
td | 85
title | 1
tr | 32
Attributes | 588

## Homepage Sections

### Homepage

### As Markup

## Stage 1: YUI Grid

- YUI Grid Template
  - XHTML
  - CSS
  - YUI CSS

## Stage 2: Styles for Main sections

- Styles for `#doc`, `#ht`, and `#ft`
  - XHTML
  - CSS

## Stage 3: Styles for Navigation Lists

- Styles for Navigation Lists
  - XHTML
  - CSS

## Stage 4: Styles for Content

- Styles for content
  - XHTML
  - CSS

## Results of Markup/Style Makeover

Harvard Homepage with Markup/Style Makeover

| Current | After Markup/Style Makeover
--- | --- | ---
Screenshot |  |
Markup Type | HTML 4.01 Transitional 53 validation errors | XHTML 1.0 Strict
Markup Size | 26.1 k | 6.9 k
Markup (after 'tidy') | 380 lines | 134 lines
Style (CSS) | n/a | Custom CSS 7.6k 241 lines YUI CSS 3.3k
Document dependencies | 1 HTML 48 images | 1 XHTML 11 images 2 CSS
Total page weight | 226 k | 83 k
Elements |
    elements:  314
            a       60
            b       15
            body    1
            br      9
            center  2
            div     1
            font    10
            head    1
            hr      6
            html    1
            img     61
            meta    3
            p       9
            script  1
            table   16
            td      85
            title   1
            tr      32
    attributes: 588
    elements:  148
            a       50
            body    1
            br      1
            div     21
            h1      1
            h2      2
            h3      1
            head    1
            html    1
            img     4
            li      43
            link    1
            meta    1
            p       9
            title   1
            ul      10
    attributes:  106

With CSS disabled:

### Assets

- XHTML
  - harvardhomepage/harvard_css.html
- Images
  - harvardhomepage/images/memorial_hall.png
  - harvardhomepage/images/crimson_background2.png
  - harvardhomepage/images/stiller.jpg
  - harvardhomepage/images/painrelievers.jpg
  - harvardhomepage/images/veritas.png
  - harvardhomepage/images/faust.png
  - harvardhomepage/images/research.png
  - harvardhomepage/images/bullet-whiteoncrimson.png
  - harvardhomepage/images/bullet.png
  - harvardhomepage/images/multimedia.png
  - harvardhomepage/images/events.png
- CSS
  - harvardhomepage/custom.css
  - harvardhomepage/reset-fonts-grids/reset-fonts-grids-min.css

## Results on Many Browsers

### Services

- Overview article: Browser Tests, Services and Compatibility Test Suites
- Specific Service: BrowserShots.org

### Do it yourself

- Capture Screen/Window
- SnagIt Capture
- Pearl Crescent PageSaver for Firefox

### Results for Harvard Makeover

- Screenshots for different browsers, from BrowserShots.org

The above uses "Thickbox", which is a UI widget written in JavaScript that is built on jQuery and uses AJAX. Uses: jquery.js, thickbox.js, thickbox.css.

## JavaScript: Manipulate the Page

JS can be used to manipulate CSS properties.

Note the use of event attributes (`onclick`, `onmouseover`, `onmouseout`) as well as a `javascript:` protocol in an `href` value.

Example 10.56
Example 10.56 Source:
<div id="cscie75-course" style="float: left; width: 50%; padding: 10px; margin: 10px; border: thin solid black; font-family: tahoma,arial,helvetica,sans-serif;" > <h3>CSCI E-75: Building Dynamic Websites</h3> <p> Harvard Extension School, Spring 2007-2008 <br/>David J. Malan <br/> Monday, 7:35 to 9:35 pm</p> <p id="cscie75-description" > Today's websites are increasingly dynamic. Pages are no longer static HTML files but instead generated by scripts and database calls. User interfaces are more seamless, with technologies like Ajax replacing traditional page reloads. This course teaches students how to build dynamic websites with Ajax and with Linux, Apache, MySQL, and PHP (LAMP), one of today's most popular frameworks. Students learn how to set up domain names with DNS, how to structure pages with XHTML and CSS, how to program in JavaScript and PHP, how to configure Apache and MySQL, how to design and query databases with SQL, and how to use Ajax with both XML and JSON. The course discusses issues of security, scalability, and cross-browser support. Prerequisite: prior programming experience in any language. (4 credits) </p> </div> <div style="width: 20%; float: left; margin-left: 2em;" > <p><strong>Align Description</strong></p> <ul> <li><a href="#" onclick="align('right')" shape="rect" >right</a></li> <li><a href="#" onclick="align('left')" shape="rect" >left</a></li> <li><a href="#" onclick="align('justify')" shape="rect" >justify</a></li> </ul> <p><strong>Hide/Show/Toggle Description</strong></p> <ul> <li><a href="javascript:hidedesc()" shape="rect" >Hide</a></li> <li><a href="#" onclick="showdesc()" shape="rect" >Show</a></li> <li><a href="#" onclick="toggledesc()" shape="rect" >Toggle</a></li> </ul> <p><strong>Set background-color</strong></p> <ul> <li><a href="#" onclick="backgroundcolor('#f66')" shape="rect" >red</a></li> <li><a href="#" onclick="backgroundcolor('#6f6')" shape="rect" >green</a></li> <li><a href="#" onclick="backgroundcolor('#ff6')" shape="rect" >yellow</a></li> <li><a href="#" onclick="backgroundcolor('#66f')" shape="rect" >blue</a></li> <li><a href="#" onmouseover="backgroundcolor('#f6f')" onmouseout="revertcolor()" shape="rect" >purple</a></li> </ul> </div>
In example56.js
function align(val) { node = document.getElementById('cscie75-description'); node.style.textAlign = val; } function hidedesc() { node = document.getElementById('cscie75-description'); node.style.display = 'none'; } function showdesc() { node = document.getElementById('cscie75-description'); node.style.display = 'block'; } function toggledesc() { node = document.getElementById('cscie75-description'); var currentdisplay = node.style.display; if(currentdisplay == 'none') showdesc(); else hidedesc(); } var previouscolor = '#fff'; function backgroundcolor(color) { node = document.getElementById('cscie75-course'); previouscolor = node.style.backgroundColor; node.style.backgroundColor = color; } function revertcolor() { node = document.getElementById('cscie75-course'); node.style.backgroundColor = previouscolor; }
In head element:
<script src="example56.js" type="text/javascript"> </script>
Example 10.56 Demonstrated

## Exposing Additional Form Elements

Additional relevant form elements are exposed based upon user input. Here, this is achieved by having the entire form in the markup, with a certain section hidden via CSS (`display: none;`). If "Yes" is chosen, the display property is changed to "block" through JS.

Example 10.57
Example 10.57 Source:
<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" name="ice_cream" id="ice_cream" enctype="application/x-www-form-urlencoded" > <div> Would you like ice cream?<br/> <input type="radio" name="want" id="ic_yes" value="yes" onclick="displayIceCreamOptions()" /> <label for="ic_yes" >Yes</label><br/> <input type="radio" name="want" id="ic_no" value="no" onclick="displayIceCreamOptions()" /> <label for="ic_no" >No</label> </div> <div style="display: none; margin-left: 2em; background-color: #eee; padding: 1em; " id="icecream_options" > <fieldset> <legend>Ice Cream Options</legend> <p>How would you like it?</p> <input type="radio" id="container_cup" name="container" value="cup" /> <label for="container_cup" >Cup</label> <br/> <input type="radio" id="container_cone" name="container" value="cone" /> <label for="container_cone" >Cone</label> <br/> <p>Pick your toppings:</p> <input type="checkbox" name="toppings" id="toppings_wc" value="whipcream" /> <label for="toppings_wc" >Whipped cream</label> <br/> <input type="checkbox" name="toppings" id="toppings_j" value="jimmies" /> <label for="toppings_j" >Jimmies</label> <br/> <input type="checkbox" name="toppings" id="toppings_nuts" value="nuts" /> <label for="toppings_nuts" >Nuts</label> <br/> <input type="checkbox" name="toppings" id="toppings_cherry" value="cherry" /> <label for="toppings_cherry" >Cherry</label> </fieldset> </div> <p><input type="submit" /></p> </form>
In script element (within head element):
function displayIceCreamOptions() { var divico = document.getElementById('icecream_options'); var state = divico.style.display; if (document.forms['ice_cream'].want[0].checked) { divico.style.display = 'block'; } else { divico.style.display = 'none'; } }
Example 10.57 Demonstrated

## Tabs with jQuery

Tab Plugin for jQuery allows the easy creation of tabs from simple markup.

- Accessible, Unobtrusive Javascript Tabs wtih jQuery
  - Demos

Without JS and CSS:

With JS and CSS:

- Example: tabs.html

Markup:

<div id="container"> <ul class="anchors"> <li class="on"><a href="#basic">Course</a></li> <li class=""><a href="#description">Description</a></li> <li class=""><a href="#schedule">Schedule</a></li> </ul> <div style="display: block;" id="basic" class="anchor"> <h2>Course Information</h2> <h3>Fundamentals of Website Development</h3> <p> Harvard Extension School, Spring 2007-2008 <br/> CSCI E-12 <br/> Wednesday, 5:30 to 7:30 pm</p> </div> <div style="display: none;" id="description" class="anchor"> <h2>Course Description</h2> <p>This course provides a foundation ...</p> </div> <div style="display: none;" id="schedule" class="anchor"> <h2>Schedule of Lectures</h2> <ol> <li>Introduction, Internet and Web Basics</li> <li>Markup: XHTML and HTML, Part 1</li> ... </ol> </div> </div>

JS:

<script src="js/jquery.js" type="text/javascript"></script> <script src="js/tabs.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $.tabs("container"); }); </script>

## A Calendar Widget

jQuery has plugins that will provide an unobtrusive "calendar" widget for picking dates.

Example: date_picker.html

Markup:

<form action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi"> <p> Enter a start date: <input class="date" type="text" size="32" name="startdate" id="startdate" /> </p> <p> Enter an end date: <input class="date" type="text" size="32" name="enddate" id="enddate" /> </p> <input type="submit"/> </form>

JS:

<style type="text/css">@import url(js/core.ui.datepicker/ui.datepicker.css);</style> <script type="text/javascript" src="js/core.ui.datepicker/ui.datepicker.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('input.date').datepicker(); }) </script>

## Slideshow: Thickbox

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

A gallery with no JavaScript -- thumbnail images are linked to the full-sized image with a simple
`<a href="full/a.png"><img src="thumb/a.png"/></a>`:

### Thickbox

Example: Gallery with Thickbox

Add Thickbox and give the "a" elemnts a `class="gallery"`:

Gallery

Viewing an individual image:

### Example Galleries with Lightbox, Lightbox 2, and Thickbox

View example galleries implemented in Lightbox and Lightbox 2 (using Prototype/Scriptaculous) as well as Thickbox (using jQuery).