CSCI E-75: Cascading Style Sheets (CSS) - Harvard University

CSCI E-75: Cascading Style Sheets 

http://localhost:8080/cocoon/projects/cscie12/slides/20080421/handout.html 



Table of Contents | All Slides | Link List | Examples | CSCI E-75 

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 

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 

Cascading Style Sheets (CSS) 

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 

Consequences 

Changing design can be a major 

undertaking 

HTML/XHTML very complex; can 

easily lead to errors 

Unnecessary content constraints 

1 of 140 4/21/2008 5:18 PM 

2 of 140 4/21/2008 5:18 PM





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 

3 of 140 4/21/2008 5:18 PM 

4 of 140 4/21/2008 5:18 PM





Harvard College Admissions 

Lists 

Harvard College Admissions 

With CSS disabled: 

Lists combined with CSS are very powerful. Lists can remain lists in markup (navigation, content 

items, etc.) and CSS can style them as desired. 

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. 

5 of 140 4/21/2008 5:18 PM 

6 of 140 4/21/2008 5:18 PM





Department of African and African American Studies 

Department of African and African American Studies 


7 of 140 4/21/2008 5:18 PM 

8 of 140 4/21/2008 5:18 PM





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. 

9 of 140 4/21/2008 5:18 PM 

10 of 140 4/21/2008 5:18 PM





XHTML: a simple example with CSS 

No CSS: simple.html 

With CSS: 

simple-style.html 

simple-style.css 

1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

view plain print 

 

 

 

 

 

My Schools 

 

 

 

 

 

... 

 

 

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

11 of 140 4/21/2008 5:18 PM 

12 of 140 4/21/2008 5:18 PM





1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20. 

21. 

22. 

23. 

24. 

25. 

26. 

27. 

28. 

29. 

30. 

31. 

32. 

33. 


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 { 


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) 

W3C CSS Validation Service 

http://jigsaw.w3.org/css-validator/ 

CSS Validator 

13 of 140 4/21/2008 5:18 PM 

14 of 140 4/21/2008 5:18 PM





CSS Resources 

www.alistapart.com 

www.simplebits.com 

meyerweb.com/eric/css/ 

Books 

www.westciv.com/style_master/house 

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 

15 of 140 4/21/2008 5:18 PM 

16 of 140 4/21/2008 5:18 PM





Binding Styles to Markup 

style attribute 

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 

Example 10.1 

Example 10.1 Source: 


1.





style element 

link element 

Example 10.2 


1. 

2. 

3. 

4. 


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 a 

sit amet urna. Maecenas condimentum hendrerit turpis. 

In style element () within head element: 

1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 


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 

The link element can reference an external stylesheet. 

Example 10.3 



1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec 

2. facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit 

3. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis a 

4. sit amet urna. Maecenas condimentum hendrerit turpis. 

In example3.css 


1. p { 

2. color: black; 

3. background-color: teal; 

4. padding: 1em; 

5. font-family: helvetica, sans-serif; 

6. text-align: justify; 

7. margin: 2em; 

8. } 

In head element: 

1. 


 




19 of 140 4/21/2008 5:18 PM 

20 of 140 4/21/2008 5:18 PM





Anatomy of a CSS Rule 

Example 10.4 


1. 

2. 

3. 

4. 








1. p { 

2. color: red; 

3. background-color: blue; 

4. } 


Properties and Values 



CSS Rule 

Selector and Declarations 

21 of 140 4/21/2008 5:18 PM 

22 of 140 4/21/2008 5:18 PM





Combining Rules 

Combining Selectors 

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

Rules can be listed separately: 

1. 

2. 

3. 

4. 

5. 

6. 


p {color: black;} 

p {background-color: teal;} 

p {padding: 1em;} 

p {margin: 1em;} 

p {font-family: helvetica, sans-serif;} 

p {text-align: justify;} 

Selectors can be combined into comma-separated groups. 


1. h1 { color: maroon; } 






We combine the selectors so that a single declaration applies to multiple selectors. 

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

1. 


h1, h2, h3, h4, h5, h6 { color: maroon; } 

1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 


p { 

color: black; 

background-color: teal; 

padding: 1em; 

margin: 1em; 

font-family: helvetica, sans-serif; 

text-align: justify; 

} 

23 of 140 4/21/2008 5:18 PM 

24 of 140 4/21/2008 5:18 PM





class selectors 

id selectors 

The class and id attributes of XHTML elements can be used in conjunction with styles. 

Example 10.5 



1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci 

2. nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. 

3. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, 

4. commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum 

5. hendrerit turpis. 

6. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras 

7. sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim 

8. velit at orci. 

9. Lorem ipsum dolor sit amet, 

10. consectetuer adipiscing elit. Cras sollicitudin, orci nec 

11. facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. 


13. sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim 

14. velit at orci. 



1. div { 

2. margin: 0.5em; 

3. padding: 0.5em; 

4. font-family: times; 

5. color: black; 

6. background-color: white; 

7. } 

8. div.withstyle { 

9. margin: 0.5em; 

10. padding: 0.5em; 

11. font-family: sans-serif; 

12. color: navy; 

13. background-color: olive; 

14. } 

15. .warn { 

16. color: red; 

17. background-color: yellow; 

18. font-weight: bold; 

19. } 

20. #legalese { 

21. font-size: 0.6em; 

22. color: #cccccc; 

23. } 

Example 10.6 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 


Lorem ipsum dolor 

 

 

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. 

Nulla turpis erat, faucibus commodo, iaculis id, aliquet quis, lectus. 

Pellentesque habitant morbi tristique senectus et netus et malesuada 

fames ac turpis egestas. 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 


#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; 


color: #999; 

border-top: thin solid #999; 


font-size: 80%; 

} 







25 of 140 4/21/2008 5:18 PM 

26 of 140 4/21/2008 5:18 PM





Contextual Selectors 

Selectors 

Example 10.7 


1. 

2. 

3. 

4. 

5. 


Emphasized text outside of li appear "normal". 

 

Emphasized text within li have a different 

style. 

 


1. 


li em { color: red; background-color: navy;} 




element 

descendant 

ul li 

class 

id 

p.abstract 

.warn 

#main 

#head 

child 

body > p 

ul > li 

attribute 

input[type=text] 

input[type=radio] 

wildcard (*) 

27 of 140 4/21/2008 5:18 PM 

28 of 140 4/21/2008 5:18 PM





Inheritance 

Properties are typically inherited by children elements. 

Example 10.8 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 



sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim vel 

at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, fe 

Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. 




sit amet urna. Maecenas condimentum hendrerit turpis. 


1. 

2. 

3. 


body { color: navy; } 

em { color: red; } 

div { color: green; } 




29 of 140 4/21/2008 5:18 PM 

30 of 140 4/21/2008 5:18 PM





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 

author's stylesheet 

reader's stylesheet 

UA's stylesheet 

"id" attributes 

"class" attributes 

element names 

last occurence has higher specificity 

Stylesheet Origin 

Specificity of Selector 

Order 

31 of 140 4/21/2008 5:18 PM 

32 of 140 4/21/2008 5:18 PM





The Cascade in Action 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 


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 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20. 

21. 

22. 

23. 

24. 

25. 

26. 

27. 

28. 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. 

Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. 

 

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. 

 

 

Proin sollicitudin ante vel eros. 

Nunc tempus. 

Quisque vitae quam non magna mattis volutpat. 

 

Quisque feugiat tellus ultricies urna. Pellentesque habitant morbi tristique 

senectus et netus et malesuada fames ac turpis egestas. Nullam tincidunt. 

 

 

Pellentesque sit amet metus. 

Sed sollicitudin feugiat massa. 

Sed magna. 

 

 

Sed malesuada elit non augue. Vestibulum nec nulla. Aenean orci. Ut sem leo, placerat 

 

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. 

 

33 of 140 4/21/2008 5:18 PM 

34 of 140 4/21/2008 5:18 PM





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 

35 of 140 4/21/2008 5:18 PM 


1. html, address, 

2. blockquote, 

3. body, dd, div, 

4. dl, dt, fieldset, form, 

5. frame, frameset, 

6. h1, h2, h3, h4, 

7. h5, h6, noframes, 

8. ol, p, ul, center, 

9. dir, hr, menu, pre { display: block } 

10. li { display: list-item } 

11. head { display: none } 

12. table { display: table } 

13. tr { display: table-row } 

14. thead { display: table-header-group } 

15. tbody { display: table-row-group } 

16. tfoot { display: table-footer-group } 

17. col { display: table-column } 

18. colgroup { display: table-column-group } 

19. td, th { display: table-cell; } 

20. caption { display: table-caption } 

21. th { font-weight: bolder; text-align: center } 

22. caption { text-align: center } 

23. body { margin: 8px; line-height: 1.12 } 

24. h1 { font-size: 2em; margin: .67em 0 } 

25. h2 { font-size: 1.5em; margin: .75em 0 } 

26. h3 { font-size: 1.17em; margin: .83em 0 } 

27. h4, p, 

28. blockquote, ul, 

29. fieldset, form, 

30. ol, dl, dir, 

31. menu { margin: 1.12em 0 } 

32. h5 { font-size: .83em; margin: 1.5em 0 } 

33. h6 { font-size: .75em; margin: 1.67em 0 } 

34. h1, h2, h3, h4, 

35. h5, h6, b, 

36. strong { font-weight: bolder } 

37. blockquote { margin-left: 40px; margin-right: 40px } 

38. i, cite, em, 

39. var, address { font-style: italic } 

40. pre, tt, code, 

41. kbd, samp { font-family: monospace } 

42. pre { white-space: pre } 

43. button, textarea, 

44. input, object, 

45. select { display:inline-block; } 

46. big { font-size: 1.17em } 

47. small, sub, sup { font-size: .83em } 

48. sub { vertical-align: sub } 

49. sup { vertical-align: super } 

50. table { border-spacing: 2px; } 

51. thead, tbody, 

52. tfoot { vertical-align: middle } 

53. td, th { vertical-align: inherit } 

54. s, strike, del { text-decoration: line-through } 

55. hr { border: 1px inset } 

56. ol, ul, dir, 

57. menu, dd { margin-left: 40px } 

58. ol { list-style-type: decimal } 

59. ol ul, ul ol, 

60. ul ul, ol ol { margin-top: 0; margin-bottom: 0 } 

61. u, ins { text-decoration: underline } 

62. br:before { content: "\A" } 

63. :before, :after { white-space: pre-line } 

64. center { text-align: center } 

65. abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em } 

66. :link, :visited { text-decoration: underline } 

67. :focus { outline: thin dotted invert } 

68. 

69. /* Begin bidirectionality settings (do not change) */ 

70. BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override } 

71. BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override } 

36 of 140 72. 

73 *[DIR "lt "] { di ti lt i d bidi b d } 

4/21/2008 5:18 PM





HTML 2 Sample default CSS 

CSS Properties 

1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20. 

21. 

22. 

23. 

24. 

25. 

26. 

27. 

28. 

29. 

30. 

31. 

32. 

33. 

34. 

35. 

36. 

37. 

38. 

39. 

40. 

41. 

42. 

43. 

44. 

45. 

46. 

47. 

48. 

49. 

50. 

51. 

52. 

53. 

54. 

55. 

56. 

57. 


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 } 

37 of 140 4/21/2008 5:18 PM 

38 of 140 4/21/2008 5:18 PM





CSS Level 1 lists 53 properties. 

CSS Level 2.1 lists 98 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 

azimuth 






background 

border-collapse 

border-color 

border-spacing 

border-style 

border-top 

border-top-color 

border-top-style 


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 

39 of 140 4/21/2008 5:18 PM 

40 of 140 4/21/2008 5:18 PM





font properties 


font-family 

font-style 

font-variant 

font-weight 

font-size 

font 

Example 10.10 


1. 

2. 

3. 

4. 

5. 

font-family 


Garamond, Times, or serif (generic fam 

Arial, Helvetica or sans-serif ( 

Courier or monospace (generic family)





font-size 

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

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 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20. 

21. 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit 

Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis eni 

velit at orci. 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 















Lorem ipsum dolor sit amet, consectetuer adipiscing elit 




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. 


facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. 


sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut 


Lorem ipsum dolor sit amet, consectetuer 

adipiscing elit. Cras sollicitudin, orci nec facilisis 

vehicula, neque urna porta risus, ut sagittis enim 


Relative Names: 

Example 10.15 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 


 




Lorem ipsum dolor sit amet, consectetuer adipiscing e 






 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis 

vehicula, neque urna porta risus, ut sagittis enim velit at orci. 

43 of 140 4/21/2008 5:18 PM 

44 of 140 4/21/2008 5:18 PM





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: 

1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 











Lorem ipsum dolor sit amet. 

Example 10.16 



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

1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 


 













 

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. 


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 





sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut 


Absolute Units: 

Example 10.17 


45 of 140 4/21/2008 5:18 PM 

46 of 140 4/21/2008 5:18 PM





Relative vs. Absolute 

Relative Sizes and Inheritance 

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 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 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 


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. 

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. 

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. 

Nunc non urna nec lorem porta varius. Sed malesuada elit non augue. Vestibulum n 

nulla. Aenean orci. Ut sem leo, placerat quis, ultricies nec, lacinia in, ante. Pro 

leo elit, dignissim nec, tincidunt dictum, mattis et, arcu. 

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. 

47 of 140 4/21/2008 5:18 PM 

48 of 140 4/21/2008 5:18 PM






1. 

2. 

3. 

4. 

5. 


body {font-size: medium; } 

div { 


margin-left: 50px; 

} 




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 


1. 

2. 

3. 

4. 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci ne 





1. 

2. 

3. 


body { 

font: normal normal normal 12pt/200% arial, helvetica, sans-serif; 

} 




49 of 140 4/21/2008 5:18 PM 

50 of 140 4/21/2008 5:18 PM





word-spacing 

letter-spacing 

text-decoration 

vertical-align 

text-transform 

text-align 

text-indent 

line-height 

Example 10.20 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20. 

21. 


text properties 


 


Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis e 



turpis. 


Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis e 



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 

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 

commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum 

hendrerit turpis. 

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. 





































51 of 140 4/21/2008 5:18 PM 

52 of 140 4/21/2008 5:18 PM





CSS Units 

Color Units 

Length 

em, pt, ex, mm, cm, in, px 

Percentage 

URL 

url(url goes here) 

Color 

name, rgb value 

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 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 


 


 

 


 







Visibone Color Laboratory 

Web Palette / Web Safe Colors 

Web Color Cube 

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 

55 of 140 4/21/2008 5:18 PM 

56 of 140 4/21/2008 5:18 PM





Block Model 

margin, padding, border 

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 

margin-top 

margin-right 

margin-bottom 

margin-left 

margin (shorthand) 

padding 

padding-top 

padding-right 

padding-bottom 

padding-left 

padding (shorthand) 

border 


border-right-width 

border-bottom-width 

border-left-width 

border-width 

border-color 

border-style 

border-top 

border-right 

border-bottom 

border-left 

border 

57 of 140 4/21/2008 5:18 PM 

58 of 140 4/21/2008 5:18 PM





TRBL for padding and margin shorthand 

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


1. p.ex1 {padding: 0.5em 0.25em 0.5em 0.25em;} 

2. /* equivalent to... */ 

3. 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 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20. 

21. 

22. 

23. 

24. 

25. 

26. 

27. 

28. 

29. 

30. 

31. 

32. 

33. 

34. 

35. 

36. 

37. 

38. 

39. 

40. 

41. 

42. 

43. 

44. 

45. 


 

Dotted 


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. 

Dashed 

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. 

Outset 

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. 

 

Solid 

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. 

Double 

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. 

Groove 

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. 

Ridge 

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. 

Inset 

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. 

None 

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. 

 


59 of 140 4/21/2008 5:18 PM 

60 of 140 4/21/2008 5:18 PM





1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 


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; } 

Margin, Padding, Border Example 




Example 10.23 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 


 

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 an 

Jefferson's most enduring monument. 

We hold these truths to be self-evident, that all men are created equal, that they 

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 t 

People to alter or to abolish it, and to institute new Government, laying its foundatio 

such principles and organizing its powers in such form, as to them shall seem most like 

effect their Safety and Happiness. 

 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 


.about { 

width: 33%; 

text-align: left; 

font-size: 0.75em; 

color: #006600; 

background: #fefecd; 


margin: 0.75em; 

border-width: thin; 

border-style: dotted; 

border-color: #900; 

} 

body { 

font-size: large; 


} 


61 of 140 4/21/2008 5:18 PM 

62 of 140 4/21/2008 5:18 PM












background (a shorthand property) 

Backgrounds 

Background Image with CSS 

A background image with CSS: 

Example 10.24 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 



consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urn 

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. 


velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vit 

felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.





1. 

2. 

3. 

4. 

5. 

6. 


 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec fac 




 


Example 10.25 



1. Lorem ipsum dolor sit amet, 

2. consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urn 

3. porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus 

4. vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas 

5. condimentum hendrerit turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 

6. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis eni 

7. velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vit 

8. felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.





Backgrounds aren't just for the "body" 

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

wood.jpg marble.jpg water.jpg 

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.27 



1. Wood 

2. Marble 

3. Water 



1. body { 

2. font-size: 18pt; 

3. font-weight: bold; 

4. color: white;} 

5. div.wood { 


7. background-image: url(images/wood.jpg); 

8. } 

9. div.marble { 

10. background-image: url(images/marble.jpg); 


12. } 

13. div.water { 

14. background-image: url(images/water.jpg); 


16. } 

1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 


 

United States Constitution 

 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan ipsum et libe 

Donec tincidunt. Duis non nulla a tortor sagittis bibendum. Nunc ante. Vestibulum 

vulputate. Aliquam ultricies, est vitae mattis ornare, leo pede lacinia mi, vitae phare 

turpis enim sed turpis. Mauris lorem. Ut rhoncus. Fusce congue ultricies est. Nulla 

dignissim sagittis ipsum. Vivamus eu lectus non enim dignissim imperdiet. Nulla facilis 

Integer euismod cursus erat. 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 


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; 


font-family: tahoma,arial,helvetica,sans-serif; 

} 







67 of 140 4/21/2008 5:18 PM 

68 of 140 4/21/2008 5:18 PM





"Normal" size: 

Backgrounds: use tiling and image size 

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

Example 10.29 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 


 

YearChampionship gam 

2008Kansas def. Memp 

2007Florida def. Ohi 

2006Florida def. UCL 

2005UNC def. Illinoi 

2004UConn def. Georg 

2003Syracuse def. Ka 

2002Maryland def. In 

2001Duke def. Arizon 

2000Michigan State d 

1999UConn def. Duke< 

1998Kentucky def. Ut 

 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 


#stats th { 

background-image: url(images/gradient-blue.png); 

background-repeat: repeat-x; 

background-position: bottombottom; 


} 

#stats td { 

border-bottom: thin dotted black; 


} 

table { 

border-collapse: collapse; 

border: thin solid black; 

} 


"Increased +4": 



69 of 140 4/21/2008 5:18 PM 

70 of 140 4/21/2008 5:18 PM





Minuteman 

Rendered in a browser: 

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: 

Example 10.30 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20. 

21. 

22. 


 

The Concord Hymn 

Ralph Waldo Emerson (1837) 

 

 

By the rude bridge that arched the flood, 

Their flag to April's breeze unfurled; 

Here once the embattled farmers stood; 

And fired the shot heard round the world. 

The foe long since in silence slept; 

Alike the conqueror silent sleeps, 

And Time the ruined bridge has swept 

Down the dark stream that seaward creeps. 

On this green bank, by this soft stream, 

We place with joy a votive stone, 

That memory may their deeds redeem, 

When, like our sires, our sons are gone. 

O Thou who made those heroes dare 

To die, and leave their children free, -- 

Bid Time and Nature gently spare 

The shaft we raised to them and Thee. 

 


71 of 140 4/21/2008 5:18 PM 

72 of 140 4/21/2008 5:18 PM





1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20. 

21. 


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; 


padding: 10px; 

width: 470px; 

} 

#header { 

background: url(images/minuteman-dark.jpg) 0in -1.25in fixed no-repeat; 

color: white; 

font-family: Times, serif; 


padding: 10px; 

width: 470px; 

} 

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 

first-child 

link 

visited 

hover 

active 

focus 

lang 

Pseudo-Classes 

first-line 

first-letter 

before 

after 

Pseudo-Elements 




73 of 140 4/21/2008 5:18 PM 

74 of 140 4/21/2008 5:18 PM





Pseudo Elements 

1. 


p:first-line { font-variant: small-caps; } 

first-letter pseudo element. 




Opening paragraph with first-letter pseudo element. 

Example 10.31 








Example 10.33 




2. sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim vel 

3. at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, fe 

4. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. 





1. 


p:first-letter { font-size: 400%; } 



1. 


p.opener:first-letter { font-size: 400%; float: left; } 



first-line pseudo element 




Example 10.32 


1. 

2. 

3. 

4. 







75 of 140 4/21/2008 5:18 PM 

76 of 140 4/21/2008 5:18 PM





a:link 

a:visited 

a:hover 

a:active 

Pseudo Classes 



Example 10.34 


1. 

2. 

3. 

4. 

5. 


National Public Radio 

Cable Network News 

Fox News 

ABC News 

The Economist 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20. 

21. 

22. 


div {margin: 0.5em; } 

a {margin: 0.25em; padding: 0.25em;} 

a:link { 


color: blue; 

background-color: white; 

} 

a:visited { 


color: green; 

background-color: silver; 

} 

a:hover { 


color: white; 

background-color: blue; 

} 

a:active { 


color: red; 

background-color: yellow; 

} 


77 of 140 4/21/2008 5:18 PM 

78 of 140 4/21/2008 5:18 PM





Class Names 

Float 

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. 

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 

Good Class/ID Names 

Poor Class Names 

globalnav 

sitenav 

gallery 

imgcaption 

aside 

warning 

Choosing class and id names appropriately will help with: 

thinborder 

rightcolumn 

rightnav 

redbold 

center 

Example 10.35 


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. 

1. 

2. 

3. 

4. 

5. 

6. 

7. 



adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesen 

nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet nequ 

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. 

See: Choosing Class and ID Names 


1. 

2. 

3. 

4. 

5. 


img { 

float: right; 

border: thin dotted black; 

padding: 5px; 

} 




79 of 140 4/21/2008 5:18 PM 

80 of 140 4/21/2008 5:18 PM





Float and Clear 

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

float: right; clear: none 

1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 


 

 

 


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 


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 

tempor mollis, augue metus feugiat urna, id nonummy velit arcu in metus. Donec nonummy, 

non convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna. 

Maecenas aliquam arcu ac turpis. 


float: right; clear: right 


1. img { 

2. float: right; 

3. clear: right; 

4. border: thin dotted black; 

5. padding: 5px; 

6. margin: 5px; 

7. } 

8. p {line-height: 1.5em;} 




Example 10.36 


81 of 140 4/21/2008 5:18 PM 

82 of 140 4/21/2008 5:18 PM





Float and Clear 

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




clear: none 

clear: right 

Example 10.37 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 



adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesen 

nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet nequ 

non pellentesque mauris turpis eu purus. 

Suspendisse mollis leo nec diam. Vestibulum 

pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan 


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 n 

convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna. Maece 

aliquam arcu ac turpis. 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 


p { 

clear: right; 

line-height: 1.5em; 

} 

img { 

float: right; 

border: thin dotted black; 

padding: 5px; 

} 

83 of 140 4/21/2008 5:18 PM 

84 of 140 4/21/2008 5:18 PM





Float 

Float: right 



Float: left 

Example 10.38 



1. 

2. Drafted by Thomas Jefferson between June 11 and June 28, 1776, the 

3. Declaration of Independence is at once the nation's most cherished symbol of liberty 

4. Jefferson's most enduring monument. 

5. We hold these truths to be self-evident, that all men are created equal, that the 

6. endowed by their Creator with certain unalienable Rights, that among these are Life, 

7. Liberty, and the pursuit of Happiness. That to secure these rights, Governments are 

8. instituted among Men, deriving their just powers from the consent of the governed. Th 

9. whenever any Form of Government becomes destructive of these ends, it is the Right of 

10. People to alter or to abolish it, and to institute new Government, laying its foundat 

11. such principles and organizing its powers in such form, as to them shall seem most li 

12. effect their Safety and Happiness. 

13. 


Example 10.39 



1. 

2. Drafted by Thomas Jefferson between June 11 and June 28, 1776, the 

3. Declaration of Independence is at once the nation's most cherished symbol of liberty 

4. Jefferson's most enduring monument. 

5. We hold these truths to be self-evident, that all men are created equal, that the 

6. endowed by their Creator with certain unalienable Rights, that among these are Life, 

7. Liberty, and the pursuit of Happiness. That to secure these rights, Governments are 

8. instituted among Men, deriving their just powers from the consent of the governed. Th 

9. whenever any Form of Government becomes destructive of these ends, it is the Right of 

10. People to alter or to abolish it, and to institute new Government, laying its foundat 

11. such principles and organizing its powers in such form, as to them shall seem most li 

12. effect their Safety and Happiness. 

13. 


1. .about { 

2. 

float: right; 

3. 

width: 33%; 

4. 


5. 


6. 

color: #006600; 

7. 


8. 


9. 


10. 


11. 


12. 


13. 

} 

14. body { 

15. 


16. 


17. } 




1. .about { 

2. 

float: left; 

3. 

width: 33%; 

4. 


5. 


6. 

color: #006600; 

7. 


8. 


9. 


10. 


11. 


12. 


13. 

} 

14. body { 

15. 


16. 

17. 


} 

85 of 140 4/21/2008 5:18 PM 

86 of 140 4/21/2008 5:18 PM








Float Opposite 

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

Example 10.40 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 


 

 

CSCI E-12 Home | 

cscie12@fas.harvard.edu 

 

 

Harvard | 

DCE 

 

 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20. 

21. 

22. 

23. 


div.footer { 

background-color: #ccf; 


} 

div.footer p.course { float: left; } 

div.footer p.global { float: right; } 

div.footer p { 

padding: 0.25em 2em 0.25em 2em; 


} 

div.footer a:link, 

div.footer a:visited, 

div.footer a:hover, 

div.footer a:active { 


color: navy; 



} 

div.footer a:hover { 

color: #ccf; 

background-color: navy; 

} 




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. 

87 of 140 4/21/2008 5:18 PM 

88 of 140 4/21/2008 5:18 PM





Float and Margins 

Example 10.41 


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

elements. 

1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 


 

 

CSCI E-12 Home | 

cscie12@fas.harvard.edu 

 

 

Harvard | 

DCE 

 

 

Example 10.42 



1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20. 

21. 

22. 

23. 

24. 


div.footer { 

background-color: #ccf; 

float: left; 


} 

div.footer p.course { float: right; } 

div.footer p.global { float: left; } 

div.footer p { 

padding: 0.25em 2em 0.25em 2em; 


} 

div.footer a:link, 

div.footer a:visited, 

div.footer a:hover, 

div.footer a:active { 


color: navy; 



} 

div.footer a:hover { 

color: #ccf; 

background-color: navy; 

} 





1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat n 

2. sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. 

3. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque 

4. mauris turpis eu purus. 

5. Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet 

6. fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede 

7. lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing 

8. diam at enim. Vestibulum nibh. 

9. Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis 

10. volutpat. Nulla vulputate, erat nec tempor mollis, augue metus feugiat urna, id 

11. nonummy velit arcu in metus. Donec nonummy, pede non convallis commodo, enim velit 

12. ornare nulla, vitae suscipit risus urna eget magna. Maecenas aliquam arcu ac turpis. 

13. Ut pellentesque porta turpis. n vitae erat. Nam lacinia imperdiet lorem. Aliquam 

14. ullamcorper ultrices dui. 

15. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus 

16. mus. Proin quis orci eu erat molestie varius. Praesent condimentum orci in lectus. Ut 

17. ipsum. In hac habitasse platea dictumst. 



1. p.first { 

2. float: left; 

3. width: 30%; 

4. font-size: x-small; 

5. } 

6. p.second { 

7. float: right; 

8. width: 30%; 

9. 

10. 

font-size: x-small; 

} 




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

89 of 140 4/21/2008 5:18 PM 

90 of 140 4/21/2008 5:18 PM





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 

Example 10.43 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat n 

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 

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. 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. 

Congress 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 


p.first { 

float: left; 

width: 30%; 


} 

p.second { 

float: right; 

width: 30%; 


} 

p.third { 

margin-left: 35%; 

margin-right: 35%; 

} 




91 of 140 4/21/2008 5:18 PM 

92 of 140 4/21/2008 5:18 PM





It is important to set height and width ! 

Without setting height and width: 

Float and a Flexible "Grid" 

1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 


 

Boeing 777 

Boeing 777 

Boeing 777 

Boeing 777 

Boeing 777 

Boeing 777 

Boeing 787 Dreamliner 

Boeing 787 Dreamliner 

Boeing Business Jet 

 


Setting height and width: 

1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 


#gallery div { 

float: left; 

width: 150px; 

height: 150px; 

padding: 5x; 

border: thin dotted #ccc; 

margin: 5px; 



} 

#gallery div img { padding-top: 5px; } 

body { 

font-family: arial,helvetica,sans-serif; 

} 




Example 10.44 


93 of 140 4/21/2008 5:18 PM 

94 of 140 4/21/2008 5:18 PM





Full list for the American League: 

Display: none 

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

JavaScript. 

With ALE and ALW display set to "none": 

1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20. 

21. 

22. 

23. 

24. 

25. 

26. 

27. 

28. 


 

American League 

 

East 

 

Baltimore 

Boston 

New York 

Toronto 

Tampa Bay 

 

Central 

 

Chicago 

Cleveland 

Detroit 

Kansas City 

Minnesota 

 

West 

 

Los Angeles 

Oakland 

Texas 

Seattle 

 

 

 


1. 

2. 

3. 


#ale { display: none; } 

#alw { display: none; } 

* { font-family: arial,helvetica,sans-serif; } 

Example 10.45 





95 of 140 4/21/2008 5:18 PM 

96 of 140 4/21/2008 5:18 PM





Lists 

Lists with Image 

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 

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

Ordered List 

An ordered list: 

Example 10.46 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 


Winningest Active Coaches, Division I NCAA Men's Basketball 

 

Mark Few 

Roy Williams 

Bruce Pearl 

Thad Matta 

Bo Ryan 

Mike Krzyzewski 

Jim Boeheim 

Bob Huggins 

Lute Olson 

Tubby Smith 

 


1. 

2. 

3. 


ol.basketball { 

list-style: upper-roman; 

} 




An unordered list controlled by CSS: 

Example 10.47 



1. 

2. Winningest Active Coaches, Division I NCAA Men's Basketball 

3. 

4. Mark Few 

5. Roy Williams 

6. Bruce Pearl 

7. Thad Matta 

8. Bo Ryan 

9. Mike Krzyzewski 

10. Jim Boeheim 

11. Bob Huggins 

12. Lute Olson 

13. Tubby Smith 

14. 

15. 



1. ul.basketball { 

2. 

3. 

list-style-image: url(images/basketball.gif); 

} 




97 of 140 4/21/2008 5:18 PM 

98 of 140 4/21/2008 5:18 PM





Doing this without CSS 

Lists without list-style 

How to accomplish this without CSS. 

Example 10.48 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 


Achieving the same effect using HTML and the IMG element (look at the source to see th 

 

Winningest Active Coaches, Division I NCAA Men's Basketball 

Mark Few 

Roy Williams 

Bruce Pearl 

Thad Matta 

Bo Ryan 

Mike Krzyzewski 

Jim Boeheim 

Bob Huggins 

Lute Olson 

Tubby Smith 

 


1. 


/* no css rules */ 




Example 10.49 


1. 

2. 

3. 

4. 

5. 


 

Big XII 

Ivy League 

Pac 10 

 


Big XII 

Ivy League 

Pac 10 

Example 10.50 


1. 

2. 

3. 

4. 

5. 


 

Big XII 

Ivy League 

Pac 10 

 


For the complete list: NCAA Men's Basketball Statistics 

1. 

2. 

3. 


ul#conferences { 

list-style: none; 

} 




99 of 140 4/21/2008 5:18 PM 

100 of 140 4/21/2008 5:18 PM





Display List Items "Inline" 

Unordered List Inline List Items Inline List Items 

Example 10.51 


1. 

2. 

3. 

4. 

5. 


 

Big XII 

Ivy League 

Pac 10 

 


1. 

2. 

3. 

4. 

5. 

6. 


ul#conferences { 


} 

ul#conferences li { 

display: inline; 

} 




Example 10.52 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20. 

21. 

22. 

23. 

24. 

25. 

26. 

27. 

28. 

29. 


ul#conferencenav { 


padding-bottom: 0.5em; 

border-bottom: 2px solid black; 


font-family: Arial, Verdana, Helvetica, sans-serif; 

color: #990000; 

} 

ul#conferencenav li { 


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; 


} 

ul#conferencenav a:link, 

ul#conferencenav a:visited { 

color: #990000; 

} 

ul#conferencenav a:hover { 

color: #dddd00; 


} 


1. 


 




Inspired by: CSS Cookbook by Christopher Schmitt 

1. 

2. 

3. 

4. 

5. 


 

Big XII 

Ivy League 

Pac 10 

 


101 of 140 4/21/2008 5:18 PM 

102 of 140 4/21/2008 5:18 PM





Lists as Navigation 

Default styling: 

As navigation: 

Example 10.53 



1. 

2. 

3. Baylor 

4. Colorado 

5. Iowa State 

6. Kansas 

7. Kansas State 

8. Missouri 

9. Nebraska 

10. Oklahoma 

11. Oklahoma State 

12. Texas 

13. Texas A&M 

14. Texas Tech 

15. 

16. 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20. 

21. 

22. 

23. 

24. 

25. 

26. 

27. 

28. 

29. 

30. 

31. 

32. 

33. 

34. 

35. 


#navlhs { 




width: 15em; 

border-right: 1px solid #333; 

margin-bottom: 1em; 

background-color: #ddd; 

color: #900; 

} 

#navlhs ul { 


margin: 0; 

padding: 0; 

} 

#navlhs ul li { 

margin: 0; 

border-top: 1px solid #333; 

} 

#navlhs ul li a { 

display: block; 


border-top: 1px solid #333; 

border-left: 5px solid #333; 


padding: 2px 2px 2px 0.5em; 

} 

#navlhs a:link, 

#navlhs a:visited { 

color: #900; 

} 

#navlhs a:hover { 

color: #fff; 


} 


1. 


 





103 of 140 4/21/2008 5:18 PM 

104 of 140 4/21/2008 5:18 PM





Default styling of nested list: 

Example 10.54 


Lists as Navigation 

Nested list styled as clamshell navigation: 

1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20. 

21. 

22. 

23. 

24. 

25. 

26. 

27. 

28. 

29. 

30. 

31. 

32. 

33. 

34. 

35. 

36. 

37. 

38. 

39. 

40. 

41. 

42. 

43. 

44. 

45. 

46. 


 

 

Big XII 

 

Baylor 

Colorado 

Iowa State 

Kansas 

Kansas State 

Missouri 

Nebraska 

Oklahoma 

Oklahoma State 

Texas 

Texas A&M 

Texas Tech 

 

 

Ivy League 

 

Brown 

Columbia 

Cornell 

Dartmouth 

Harvard 

Penn 

Princeton 

Yale 

 

 

Pac 10 

 

Arizona 

Arizona State 

California 

Oregon 

Oregon State 

Stanford 

UCLA 

USC 

Washington 

Washington State 

 

 

 

 


105 of 140 4/21/2008 5:18 PM 

106 of 140 4/21/2008 5:18 PM





1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20. 

21. 

22. 

23. 

24. 

25. 

26. 

27. 

28. 

29. 

30. 

31. 

32. 

33. 

34. 

35. 

36. 

37. 

38. 

39. 

40. 

41. 

42. 

43. 

44. 

45. 

46. 

47. 

48. 

49. 

50. 

51. 

52. 

53. 

54. 

55. 

56. 

57. 

58. 

59. 

60. 


#navlhs { 




width: 10em; 


margin-bottom: 1em; 


color: #900; 

} 

#navlhs ul { 


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-bottom: thin dotted #333; 

border-left: 5px solid #333; 


padding: 2px 2px 2px 0.5em; 

} 

#navlhs a:link { 

color: #900; 

} 

#navlhs a:visited { 

color: #900; 

} 

#navlhs a:hover { 

color: #fff; 


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; 


border-top: 1px inset #333; 

border-right: 1px inset #333; 

border-bottom: 1px inset #333; 

border-left: 5px inset #333; 

} 

#navlhs ul ul a { 


padding-left: 1.5em; 


font-weight: normal; 

} 

#navlhs ul.collapse { 

display: none; 

} 






1. 


 

107 of 140 4/21/2008 5:18 PM 

108 of 140 4/21/2008 5:18 PM





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. 

1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20. 

21. 

22. 

23. 

24. 

25. 

26. 

27. 

28. 

29. 


 

 

Top 

 

Science 

 

Biology 

 

 

Genetics 

 





1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20. 

21. 

22. 

23. 

24. 

25. 

26. 

27. 

28. 

29. 

30. 

31. 

32. 

33. 

34. 

35. 

36. 


/* 

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-weight: normal; 



} 

#breadcrumb a:hover { 


} 

#breadcrumb li span { 

color: black; 

} 

#breadcrumb { 


} 

#breadcrumb ul { 


margin-left: 0; 

padding-left: 0; 

} 

#breadcrumb ul li { 


} 

#breadcrumb ul ul li { 

background-image: url(images/arrow.gif); 

background-position: left; 

background-repeat: no-repeat; 

padding-left: 25px; 

} 


1. 


 




media selector 

CSS2 defines a media selector for different media types. 

Incorporate as part of the "link" element: 

1. 

2. 

 

 

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

1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

@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). 

111 of 140 4/21/2008 5:18 PM 

112 of 140 4/21/2008 5:18 PM





Harvard College Funding Database 

1. 

2. 

 

k rel="stylesheet" type="text/css" media="print" href="print.css" /> 

Screen display (screen.css): 

Print display (print.css): 

113 of 140 4/21/2008 5:18 PM 

114 of 140 4/21/2008 5:18 PM





Print CSS 

Yahoo! UI (YUI) Library 

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! 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) 

115 of 140 4/21/2008 5:18 PM 

116 of 140 4/21/2008 5:18 PM





YUI Grid Examples 

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

Grid: 4 areas: 

header 

body - A - 3/4 

body B - 1/4 

footer 

YUI Grid Example 

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.) 

1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20. 

21. 

22. 

23. 

24. 

25. 

26. 

27. 

28. 

29. 

30. 

31. 

 

 

Grids CSS Example - YUI Grids - Special Nesting Grid E: 3/4 - 1/4 





Harvard Home Page 

Harvard Homepage Markup/Style Makeover 

Tables exposed: 

img 61 

meta 3 

p 9 

script 1 

table 16 

td 85 

title 1 

tr 32 

Attributes 588 

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 

Elements 

226 k 

314 total 

a 60 

b 15 

body 1 

br 9 

center 2 

div 1 

font 10 

head 1 

hr 6 

html 1 

119 of 140 4/21/2008 5:18 PM 

120 of 140 4/21/2008 5:18 PM





Homepage Sections 

Homepage 

As Markup 

121 of 140 4/21/2008 5:18 PM 

122 of 140 4/21/2008 5:18 PM





Stage 1: YUI Grid 

Stage 2: Styles for Main sections 

YUI Grid Template 

XHTML 

CSS 


Styles for #doc, #ht, and #ft 

XHTML 


123 of 140 4/21/2008 5:18 PM 

124 of 140 4/21/2008 5:18 PM





Stage 3: Styles for Navigation Lists 

Stage 4: Styles for Content 

Styles for Navigation Lists 

XHTML 


Styles for content 

XHTML 


125 of 140 4/21/2008 5:18 PM 

126 of 140 4/21/2008 5:18 PM





Results of Markup/Style Makeover 

Harvard Homepage with Markup/Style Makeover 

Current After Markup/Style Makeover 

script 1 

table 16 

td 85 

title 1 

tr 32 

attributes: 588 

p 9 

title 1 

ul 10 

attributes: 106 

Screenshot 


Markup Type HTML 4.01 Transitional XHTML 1.0 Strict 

53 validation errors 

Markup Size 26.1 k 6.9 k 

Markup (after 'tidy') 380 lines 134 lines 

Style (CSS) 

Document dependencies 

n/a 

1 HTML 

48 images 

Custom CSS 

7.6k 

241 lines 


3.3k 

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 

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 

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 


127 of 140 4/21/2008 5:18 PM 

128 of 140 4/21/2008 5:18 PM





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 

Capture Screen/Window 

SnagIt Capture 

Pearl Crescent PageSaver for Firefox 

Do it yourself 

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. 

129 of 140 4/21/2008 5:18 PM 

130 of 140 4/21/2008 5:18 PM





JS can be used to manipulate CSS properties. 

JavaScript: Manipulate the Page 

Note the use of event attributes (onclick, onmouseover, onmouseout) as well as a javascript: 

protocol in an href value. 

Example 10.56 


1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20. 

21. 

22. 

23. 

24. 

25. 

26. 

27. 

28. 

29. 

30. 

31. 

32. 

33. 

34. 

35. 

36. 

37. 

38. 






1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20. 

21. 

22. 

23. 

24. 

25. 

26. 

27. 

28. 

29. 

30. 


function align(val) { 

node = document.getElementById('cscie75-description'); 

node.style.textAlign = val; 

} 

function hidedesc() { 


node.style.display = 'none'; 

} 

function showdesc() { 


node.style.display = 'block'; 

} 

function toggledesc() { 


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; 

} 

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. 


1. 


 

Example 10.56 Demonstrated 

Example 10.57 


133 of 140 4/21/2008 5:18 PM 

134 of 140 4/21/2008 5:18 PM





1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20. 

21. 

22. 

23. 

24. 

25. 

26. 

27. 

28. 

29. 

30. 

31. 

32. 

33. 






1. 

2. 

3. 

4. 

5. 

6. 

7. 

8. 

9. 

10. 

11. 

12. 

13. 

14. 

15. 

16. 

17. 

18. 

19. 

20. 

21. 

22. 

23. 

24. 

25. 

26. 

27. 

28. 

29. 

 

 

Course 

Description 

Schedule 

 

 

Course Information 

Fundamentals of Website Development 

Harvard Extension School, Spring 2007-2008 

CSCI E-12 

Wednesday, 5:30 to 7:30 pm 

 

 

Course Description 

This course provides a foundation ... 

 

 

Schedule of Lectures 

 

Introduction, Internet and Web Basics 

Markup: XHTML and HTML, Part 1 

... 

 

 

 

A Calendar Widget 

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

JS: 

1. 

2. 

3. 

4. 

5. 

6. 

7. 

 

 

 

$(document).ready(function() { 

$.tabs("container"); 

}); 

 

Example: date_picker.html 

Markup: 

1. 

2. 

3. Enter a start date:





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 

: 

Example Galleries with Lightbox, Lightbox 2, and Thickbox 

Thickbox 

View example galleries 

implemented in Lightbox and Lightbox 2 (using Prototype/Scriptaculous) as well as Thickbox 

(using jQuery). 

Example: Gallery with Thickbox 

Table of Contents | All Slides | Link List | Examples | CSCI E-75 

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

Gallery 

Viewing an individual image: 

139 of 140 4/21/2008 5:18 PM 

140 of 140 4/21/2008 5:18 PM

CSCI E-75: Cascading Style Sheets (CSS) - Harvard University

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?