cascading style sheets (css) - cscie12.dce.harvard.edu · pseudo-classes and elements css 2.1...

Cascading Style Sheets (CSS) http://localhost:8080/cocoon/projects/cscie12/slides/20070227/handout.html

1 of 59 2/27/2007 7:48 PM

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

Cascading Style Sheets (CSS)February 27, 2007

Harvard University Division of Continuing Education

Extension School

Course Web Site: http://cscie12.dce.harvard.edu/

Copyright 1998-2007 David P. Heitmeyer

Instructor email: [email protected] Course staff email: [email protected]


2 of 59 2/27/2007 7:48 PM

Properties

CSS Level 1 lists 53 properties that let you style properties of:

fontcolortextboxes (border, padding, margins)classification (inline, block, list)

CSS Level 2.1 lists 105 properties.


3 of 59 2/27/2007 7:48 PM

XHTML and CSS

style attribute

Example 4.1

Example 4.1 Source:

Example 4.1 Rendered:

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

style element

Example 4.2

Example 4.2 Source:

In style element (<style type="text/css">) within head element:


With StylesWithout Styles

So the full page looks like:

<p style="color: black; background-color: teal; padding: 1em; font-family: helvetica, sans1. 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 4. ante sit amet urna. Maecenas condimentum hendrerit turpis. </p> 5.

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

p { 1. color: black; 2. background-color: teal; 3. padding: 1em; 4. font-family: helvetica, sans-serif; 5. text-align: justify; 6. margin: 2em; 7. } 8.


4 of 59 2/27/2007 7:48 PM

link element

The link element can reference an external stylesheet.

Example 4.3

Example 4.3 Source:

In example3.css

In head element:



The full source:

view plain print ?

<html xmlns="http://www.w3.org/1999/xhtml"> 1. <head> 2. <title>CSCIE-12, Example: 4.3</title> 3. <style type="text/css"> 4. p { 5. color: black; 6. background-color: teal; 7. padding: 1em; 8. font-family: helvetica, sans-serif; 9. text-align: justify; 10. margin: 2em; 11. } 12. </style> 13. </head> 14. <body> 15. <p> 16. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci ne17. facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce ve18. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convalli19. sit amet urna. Maecenas condimentum hendrerit turpis. 20. </p> 21. </body> 22.</html> 23.

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

p { 1. color: black; 2. background-color: teal; 3. padding: 1em; 4. font-family: helvetica, sans-serif; 5. text-align: justify; 6. margin: 2em; 7. } 8.

<link rel="stylesheet" type="text/css" href="example3.css"/> 1.


5 of 59 2/27/2007 7:48 PM

view plain print ?

<html xmlns="http://www.w3.org/1999/xhtml"> 1. <head> 2. <title>CSCIE-12, Example: 4.4</title> 3. <link href="example4.css" type="text/css" rel="stylesheet"/> 4. </head> 5. <body> 6. <p> 7. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec8. facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce vel9. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis10. sit amet urna. Maecenas condimentum hendrerit turpis. 11. </p> 12. </body> 13./html> 14.


6 of 59 2/27/2007 7:48 PM

Firebug for Firefox

Edit CSS in Firebug: Disable CSS Rules in Firebug:

Show computed styles in Firebug:


7 of 59 2/27/2007 7:48 PM


8 of 59 2/27/2007 7:48 PM

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

first-linefirst-letterbeforeafter


9 of 59 2/27/2007 7:48 PM

Selectors

elementdescendant

ul liclass

p.abstract.warn

id#main#head

childbody > pul > li

attributeinput[type=text]input[type=radio]

wildcard (*)


10 of 59 2/27/2007 7:48 PM

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 ofseparating 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 considerchanging the name.

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 If you have a .dottedborderclass, you may wish to change how your thumbnail images are styled, but leave presentationof other markup that you've given the same class to unchanged.

See: Choosing Class and ID Names

Example 4.4

Example 4.4 Source:




Example 4.5

<div id="c1" > 1. <a href="screenshot/mlbale2006.png" > 2. <img src="screenshot/mlbale2006-t.png" class="dottedborder" alt="MLB ALE 2006 Screen3. </a><br/> 4. ALE 2006 Season 5.</div> 6.<div id="c2" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ante turpis, 7.<div id="c3" class="dottedborder" > 8. <a href="http://boston.redsox.mlb.com/news/article.jsp?ymd=20070226&content_id=1816374&v9. Manny arrives at Red Sox camp 10. </a> 11. <br/>Ramirez reports three days earlier than expected. 12. <br/>02/26/2007 9:30 AM ET 13.</div> 14.

.dottedborder { 1. margin: 2px; 2. padding: 2px; 3. border: thin dotted black; 4.} 5.#c1 { float: left; width: 175px; } 6.#c2 { float: left; width: 400px; } 7.#c3 { float: left; width: 175px; } 8.


11 of 59 2/27/2007 7:48 PM

Example 4.5 Source:




<div id="c1" > 1. <a href="screenshot/mlbale2006.png" > 2. <img src="screenshot/mlbale2006-t.png" class="thumbnail" alt="MLB ALE 2006 Screensho3. </a><br/> 4. ALE 2006 Season 5.</div> 6.<div id="c2" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ante turpis, 7.<div id="c3" class="headlines" > 8. <a href="http://boston.redsox.mlb.com/news/article.jsp?ymd=20070226&content_id=1816374&v9. Manny arrives at Red Sox camp 10. </a> 11. <br/>Ramirez reports three days earlier than expected. 12. <br/>02/26/2007 9:30 AM ET 13.</div> 14.

.thumbnail { 1. margin: 2px; 2. padding: 2px; 3. border: thin dotted black; 4.} 5..headlines{ 6. margin: 0px 5px 5px 5px; 7. padding: 10px; 8. border: medium solid #ddd; 9.} 10.#c1 { float: left; width: 175px; } 11.#c2 { float: left; width: 400px; } 12.#c3 { float: left; width: 175px; } 13.


12 of 59 2/27/2007 7:48 PM

Block Model

marginborderpaddingcontent

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


13 of 59 2/27/2007 7:48 PM

margin, padding, border

marginmargin-topmargin-rightmargin-bottommargin-leftmargin (shorthand)

paddingpadding-toppadding-rightpadding-bottompadding-leftpadding (shorthand)

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

borderborder-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-widthborder-colorborder-styleborder-topborder-rightborder-bottomborder-leftborder


14 of 59 2/27/2007 7:48 PM

border-style

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

Example 4.6

Example 4.6 Source:


15 of 59 2/27/2007 7:48 PM

<div> 1. <h4>Dotted</h4> 2. <p class="border1" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras 3. feugiat mauris facilisis libero. Etiam nisl. Cras est dolor, viverra ac, ultrices 4. volutpat, vestibulum et, odio. Nulla eget libero. Praesent eget tellus vel nibh nonumm5. egestas. Donec a ligula. Aenean magna odio, nonummy eu, faucibus ac, aliquam non, est.6. Integer gravida pede id justo. Maecenas elit nisi, blandit id, ornare eu, condimentum 7. diam. Donec at felis mattis magna euismod suscipit. Curabitur pulvinar. Duis in dui. 8. Integer mattis risus ac erat. Nullam sit amet dolor. Suspendisse non lacus. </p> 9. <h4>Dashed</h4> 10. <p class="border2" > Etiam eu arcu quis lectus semper sodales. Donec vitae risus. Intege11. sollicitudin imperdiet dolor. Donec vehicula. Aliquam ut sapien sed eros imperdiet 12. pharetra. Donec accumsan scelerisque leo. Sed eros nunc, pellentesque et, mollis non, 13. faucibus venenatis, tortor. Curabitur auctor rutrum turpis. Vestibulum id ipsum eu leo14. venenatis cursus. Nulla at risus. Lorem ipsum dolor sit amet, consectetuer adipiscing 15. elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac 16. turpis egestas. Curabitur eget odio. Phasellus consectetuer massa. Aenean ornare 17. congue purus. Aliquam orci ligula, tempus eget, blandit et, mattis a, lorem. Sed non e18. magna pharetra sodales. </p> 19. <h4>Outset</h4> 20. <p class="border3" > Pellentesque a velit. Sed pharetra vestibulum mauris. Ut vel arcu. 21. Cras dolor ligula, eleifend et, ultrices nec, viverra in, ipsum. In convallis pharetra22. lacus. Etiam tellus. Aliquam quam. Vivamus mattis purus nec quam. Suspendisse hendreri23. dui ac massa. Morbi consectetuer malesuada lacus. Nulla eu pede. Quisque mattis. Etiam24. vel nunc. </p> 25. <h4>Solid</h4> 26. <p class="border4" > Etiam rhoncus. Praesent id neque et odio dictum varius. Integer 27. imperdiet blandit orci. Donec nec nunc posuere augue egestas accumsan. Nunc nonummy 28. metus ut nunc. In id turpis vitae nisl eleifend bibendum. Curabitur cursus aliquam dol29. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos 30. hymenaeos. Nulla facilisi. Integer vitae eros ac pede volutpat varius. Duis 31. pellentesque, lectus vel fringilla tincidunt, tortor erat gravida urna, vel interdum 32. neque risus sit amet arcu. Phasellus sagittis sem vel eros. Nullam est sem, hendrerit 33. vitae, imperdiet id, fermentum nec, justo. Sed nisi risus, malesuada non, scelerisque 34. non, mattis ac, turpis. Mauris tempor commodo massa. Donec porttitor libero sed neque.35. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae36. Donec tortor. Sed quis dolor. </p> 37. <h4>Double</h4> 38. <p class="border5" > Duis id erat a tortor laoreet aliquet. Quisque consectetuer loborti39. mauris. Donec pede. Cras non turpis vel tortor iaculis nonummy. Ut facilisis viverra s40. Morbi pretium iaculis ligula. Praesent lectus. Aenean vel ante. Nunc interdum semper 41. nisl. Pellentesque tincidunt. Proin eget orci. Praesent tortor. Aenean lobortis ornare42. lacus. Etiam congue. Ut egestas feugiat elit. </p> 43. <h4>Groove</h4> 44. <p class="border6" > Aliquam leo nunc, congue a, imperdiet eget, aliquet ac, tortor. Sed45. est. Vivamus nisi. Mauris in nisl. Sed ultricies nunc vel nunc. In dignissim consequat46. arcu. Sed in risus. Nulla facilisi. Integer purus urna, laoreet vitae, congue a, posue47. ut, ipsum. Nunc ac lacus sit amet nisi porttitor aliquam. Pellentesque ante. Etiam luc48. nisl. Suspendisse a mauris vitae odio consequat pharetra. Nam egestas leo vel elit. Se49. ornare risus at elit. Cras mi est, aliquam sed, dignissim quis, bibendum non, purus. 50. Nullam dictum. Morbi nisl justo, dictum sit amet, lobortis non, auctor id, nunc. Cum 51. sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>52. <h4>Ridge</h4> 53. <p class="border7" > Vivamus dictum, sem in vulputate vestibulum, est tellus tempus dolo54. ut laoreet arcu metus eu orci. Sed enim augue, dignissim sed, porta sed, dapibus ac, n55. Nunc mattis ipsum eu lectus. Nam pharetra mattis massa. Aliquam consectetuer, leo sed 56. pretium mollis, augue purus posuere augue, sed sagittis sapien odio in magna. Aliquam 57. erat volutpat. Fusce odio. Integer euismod. Donec aliquam pede vel ipsum. Suspendisse 58. potenti. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed quam. </p> 59. <h4>Inset</h4> 60. <p class="border8" > Maecenas consectetuer, lectus ac tempus iaculis, leo ipsum tincidun61. erat, et aliquam libero nulla ac ipsum. Nam turpis leo, feugiat vel, nonummy id, ornar62. arcu. Vestibulum porta, justo et ornare porta, neque eros vestibulum libero, semper 63. iaculis augue turpis eu neque. Quisque eu nisi sit amet mauris rutrum elementum. 64. Pellentesque ut nunc a tortor rutrum vulputate. Suspendisse lectus orci, luctus quis, 65. posuere non, pretium vel, diam. Etiam vulputate. Duis tempor posuere ipsum. Praesent 66. eget risus ac turpis venenatis porttitor. Maecenas accumsan lacus sit amet urna faucib67. dapibus. </p> 68. <h4>None</h4> 69. <p class="border9" > Maecenas consectetuer, lectus ac tempus iaculis, leo ipsum tincidun70. erat, et aliquam libero nulla ac ipsum. Nam turpis leo, feugiat vel, nonummy id, ornar71. arcu. Vestibulum porta, justo et ornare porta, neque eros vestibulum libero, semper 72. iaculis augue turpis eu neque. Quisque eu nisi sit amet mauris rutrum elementum. 73. Pellentesque ut nunc a tortor rutrum vulputate. Suspendisse lectus orci, luctus quis, 74.


16 of 59 2/27/2007 7:48 PM




body { 1. font-family: tahoma,arial,sans-serif; 2. font-size: small; 3.} 4.p { 5. margin: 1em 2em 0.5em 5em; 6. padding: 0.5em 3em; 7.} 8.p { 9. width: 50%; 10.} 11..border1 { 12. border: thin dotted #900; 13.} 14..border2 { 15. border: medium dashed #090; 16.} 17..border3 { 18. border: thick outset #009; 19.} 20..border4 { 21. border: 3px solid #999; 22.} 23..border5 { 24. border: 5px double #000; 25.} 26..border6 { 27. border: 10px groove black; 28.} 29..border7 { 30. border: 15px ridge black; 31.} 32..border8 { 33. border: 20px inset #900; 34.} 35..border9 { 36. border: 20px none #090; 37.} 38.


17 of 59 2/27/2007 7:48 PM

Margin, Padding, Border Example

Screenshot:

Example 4.7

Example 4.7 Source:


<div> 1.<div class="about" > Drafted by Thomas Jefferson between June 11 and June 28, 1776, the 2. Declaration of Independence is at once the nation's most cherished symbol of liberty and3. Jefferson's most enduring monument.</div> 4.<div> We hold these truths to be self-evident, that all men are created equal, that they a5. endowed by their Creator with certain unalienable Rights, that among these are Life, 6. Liberty, and the pursuit of Happiness. That to secure these rights, Governments are 7. instituted among Men, deriving their just powers from the consent of the governed. That 8. whenever any Form of Government becomes destructive of these ends, it is the Right of th9. People to alter or to abolish it, and to institute new Government, laying its foundation10. such principles and organizing its powers in such form, as to them shall seem most likel11. effect their Safety and Happiness. </div> 12.</div> 13.


18 of 59 2/27/2007 7:48 PM



.about { 1. width: 33%; 2. text-align: left; 3. font-size: 0.75em; 4. color: #006600; 5. background: #fefecd; 6. padding: 0.5em; 7. margin: 0.75em; 8. border-width: thin; 9. border-style: dotted; 10. border-color: #900; 11. } 12.body { 13. font-size: large; 14. line-height: 1.5; 15. } 16.


19 of 59 2/27/2007 7:48 PM

Backgrounds

background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground (a shorthand property)

['background-color' || 'background-image' || 'background-repeat' || 'background-attachment' || 'background-position'] | inherit

The sample image we will use:

Example 4.8

Example 4.8 Source:


<div style="margin-left: 45%; margin-right: 45%;" > Lorem ipsum dolor sit amet, 1. consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna2. porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus 3. vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas 4. condimentum hendrerit turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 5. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim6. velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vita7. felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </div>8.

body { background-image: url(images/shield-background.gif);} 1.


20 of 59 2/27/2007 7:48 PM



Example 4.9

Example 4.9 Source:




Example 4.10

Example 4.10 Source:




<div style="margin-left: 45%; margin-right: 45%;" > Lorem ipsum dolor sit amet, 1. consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna2. porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus 3. vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas 4. condimentum hendrerit turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 5. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim6. velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vita7. felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </div>8.

body { 1. background-image: url(images/shield-background.gif); 2. background-repeat: repeat-y; 3. } 4.

<div style="margin-left: 45%; margin-right: 45%;" > 1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec faci2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec faci3.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec faci4.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec faci5.</div> 6.

body { 1. background-image: url(images/shield-background.gif); 2. background-repeat: no-repeat; 3. background-position: center; 4. background-attachment: fixed; 5. } 6.


21 of 59 2/27/2007 7:48 PM

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 4.11





<div class="wood" > Wood 1. <div class="marble" > Marble 2. <div class="water" > Water </div> </div> </div> 3.

body { font-size: 18pt; font-weight: bold; color: black;} 1.div.wood { 2. padding: 1em; 3. background-image: url(images/wood.jpg); 4.} 5.div.marble { 6. background-image: url(images/marble.jpg); 7. padding: 1em; 8.} 9.div.water { 10. background-image: url(images/water.jpg); 11. padding: 1em; 12.} 13.


22 of 59 2/27/2007 7:48 PM

Backgrounds aren't just for the "body"

Instead of having an imgelement within the XHTML, we can include design images in the CSS. This example displays theflag.png with the h1 of the markup.

Example 4.12





With a background image that covers the entire area.

<div id="ustitle" > 1. <h1>United States Constitution</h1> 2.</div> 3.<div> <p>We the people of the United States, in order to form a more perfect union, establ4. justice, insure domestic tranquility, provide for the common defense, promote the genera5. welfare, and secure the blessings of liberty to ourselves and our posterity, do ordain a6. establish this Constitution for the United States of America.</p> </div> 7.

div#ustitle { 1. height: 80px; 2. background-color: #ddd; 3. background-image: url(images/flag-small.png); 4. background-position: left; 5. background-repeat: no-repeat; 6. margin-bottom: 0.5em; 7.} 8.#ustitle h1 { padding-top: 0.5em; text-align: center;} 9.


23 of 59 2/27/2007 7:48 PM

Example 4.13





Examples of sites that use CSS to include 'design' images:

Harvard College AdmissionsDepartment of African and African American Studies, Harvard UniversityW. E. B. Du Bois Institute, Harvard University

<div id="ustitle" > 1.<h1>United States Constitution</h1> 2.</div> 3.<div> 4.We the people of the United States, in order to form a more perfect union, establish justi5.</div> 6.

div#ustitle { 1. height: 80px; 2. background-color: #E2C7CD; 3. background-image: url(images/flag-background.png); 4. background-repeat: no-repeat; 5. background-position: lef; 6. margin-bottom: 0.5em; 7.} 8.#ustitle h1 { padding-top: 0.5em; text-align: center;} 9.


24 of 59 2/27/2007 7:48 PM

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:


25 of 59 2/27/2007 7:48 PM

Rendered in a browser:

Example 4.14



<div id="header" > 1. <h1>The Concord Hymn</h1> 2. <h2>Ralph Waldo Emerson (1837)</h2> 3.</div> 4.<div id="main" > 5. <p> By the rude bridge that arched the flood, 6. <br/> Their flag to April's breeze unfurled; 7. <br/> Here once the embattled farmers stood; 8. <br/> 9. And fired the shot heard round the world. </p> 10. <p> The foe long since in silence slept; 11. <br/> Alike the conqueror silent sleeps, 12. <br/> And Time the ruined bridge has swept 13. <br/> Down the dark stream that seaward creeps. </p> 14. <p> On this green bank, by this soft stream, 15. <br/> 16. We place with joy a votive stone, 17. <br/> That memory may their deeds redeem, 18. <br/> When, like our sires, our sons are gone. </p> 19. <p> O Thou who made those heroes dare 20. <br/> To die, and leave their children free, -- 21. <br/> Bid Time and Nature gently spare 22. <br/> 23. The shaft we raised to them and Thee. </p> 24.</div> 25.


26 of 59 2/27/2007 7:48 PM



body { 1. background: #638f29 url(images/minuteman.jpg) 0in -1.25in fixed no-repeat; 2.} 3.#main { 4. background: url(images/minuteman-light.jpg) 0in -1.25in fixed no-repeat; 5. width: 470px; 6. margin-left: 25px; 7. padding: 10px; 8. font-weight: bold; 9. font-size: x-large; 10. line-height: 1.75em; 11. font-family: Times, serif; 12.} 13.#header { 14. background: url(images/minuteman-dark.jpg) 0in -1.25in fixed no-repeat; 15. color: white; 16. width: 470px; 17. padding: 10px; 18. margin-left: 25px; 19. font-family: Times, serif; 20.} 21.


27 of 59 2/27/2007 7:48 PM

Float

Remember that the "float" occurs within the containing box (parent block).

Float the block from our earlier example:

Example 4.15



<div> 1. <div class="about" >Drafted by Thomas Jefferson between June 11 and June 28, 1776, the 2. Declaration of Independence is at once the nation's most cherished symbol of liberty a3. Jefferson's most enduring monument.</div> 4. <div> We hold these truths to be self-evident, that all men are created equal, that they5. endowed by their Creator with certain unalienable Rights, that among these are Life, 6. Liberty, and the pursuit of Happiness. That to secure these rights, Governments are 7. instituted among Men, deriving their just powers from the consent of the governed. Tha8. whenever any Form of Government becomes destructive of these ends, it is the Right of 9. People to alter or to abolish it, and to institute new Government, laying its foundati10. such principles and organizing its powers in such form, as to them shall seem most lik11. effect their Safety and Happiness. </div> 12.</div> 13.


28 of 59 2/27/2007 7:48 PM



Example 4.16




.about { 1. float: right; 2. width: 33%; 3. text-align: left; 4. font-size: 0.75em; 5. color: #006600; 6. background: #fefecd; 7. padding: 0.5em; 8. margin: 0.75em; 9. border-width: thin; 10. border-style: dotted; 11. border-color: #900; 12. } 13.body { 14. font-size: large; 15. line-height: 1.5; 16. } 17.

<div> 1. <div class="about" >Drafted by Thomas Jefferson between June 11 and June 28, 1776, the 2. Declaration of Independence is at once the nation's most cherished symbol of liberty a3. Jefferson's most enduring monument.</div> 4. <div> We hold these truths to be self-evident, that all men are created equal, that they5. endowed by their Creator with certain unalienable Rights, that among these are Life, 6. Liberty, and the pursuit of Happiness. That to secure these rights, Governments are 7. instituted among Men, deriving their just powers from the consent of the governed. Tha8. whenever any Form of Government becomes destructive of these ends, it is the Right of 9. People to alter or to abolish it, and to institute new Government, laying its foundati10. such principles and organizing its powers in such form, as to them shall seem most lik11. effect their Safety and Happiness. </div> 12.</div> 13.

.about { 1. float: left; 2. width: 33%; 3. text-align: left; 4. font-size: 0.75em; 5. color: #006600; 6. background: #fefecd; 7. padding: 0.5em; 8. margin: 0.75em; 9. border-width: thin; 10. border-style: dotted; 11. border-color: #900; 12. } 13.body { 14. font-size: large; 15. line-height: 1.5; 16. } 17.


29 of 59 2/27/2007 7:48 PM



30 of 59 2/27/2007 7:48 PM

Lists

list-style-typedisc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

list-style-imagelist-style-positionlist-stylea shorthand property

Example 4.17





Note: Bobby Knight is #14 on the list!

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

Example 4.18


<p>An ordered list:</p> 1.<strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong> 2.<ol class="basketball" > 3. <li>Mark Few</li> 4. <li>Roy Williams</li> 5. <li>Bruce Pearl</li> 6. <li>Bo Ryan</li> 7. <li>Thad Matta</li> 8. <li>Mike Krzyzewski</li> 9. <li>Jim Boeheim</li> 10. <li>Bob Huggins</li> 11. <li>Lute Olson</li> 12. <li>Tubby Smith</li> 13.</ol> 14.

ol.basketball { 1. list-style-type: upper-roman; 2.} 3.


31 of 59 2/27/2007 7:48 PM




Example 4.19





For the complete list: NCAA Men's Basketball Coaching Records (PDF)

<p>An unordered list controlled by CSS:</p> 1.<div class="basketball" > 2.<strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong> 3.<ul class="basketball" > 4. <li>Mark Few</li> 5. <li>Roy Williams</li> 6. <li>Bruce Pearl</li> 7. <li>Bo Ryan</li> 8. <li>Thad Matta</li> 9. <li>Mike Krzyzewski</li> 10. <li>Jim Boeheim</li> 11. <li>Bob Huggins</li> 12. <li>Lute Olson</li> 13. <li>Tubby Smith</li> 14.</ul> 15.</div> 16.

ul.basketball { 1. list-style-image: url(images/basketball.gif); 2.} 3.

<p>Achieving the same effect using HTML and the IMG element (look at the source to see the1.<div> 2.<strong>Winningest Active Coaches, Division I NCAA Men's Basketball</strong><br/> 3.<img src="images/basketball.gif" alt="*" />Mark Few<br/> 4.<img src="images/basketball.gif" alt="*" />Roy Williams<br/> 5.<img src="images/basketball.gif" alt="*" />Bruce Pearl<br/> 6.<img src="images/basketball.gif" alt="*" />Bo Ryan<br/> 7.<img src="images/basketball.gif" alt="*" />Thad Matta<br/> 8.<img src="images/basketball.gif" alt="*" />Mike Krzyzewski<br/> 9.<img src="images/basketball.gif" alt="*" />Jim Boeheim<br/> 10.<img src="images/basketball.gif" alt="*" />Bob Huggins<br/> 11.<img src="images/basketball.gif" alt="*" />Lute Olson<br/> 12.<img src="images/basketball.gif" alt="*" />Tubby Smith<br/> 13.</div> 14.

/* no css rules */ 1.


32 of 59 2/27/2007 7:48 PM

Lists without style

Example 4.20



ACCBix XIIBig 10Ivy LeaguePac 10

Example 4.21





<ul id="conferences" > 1. <li><a href="http://www.acc.org/" >ACC</a> 2. </li> 3. <li><a href="http://big12sports.collegesports.com/" >Bix XII</a> 4. </li> 5. <li><a href="http://bigten.collegesports.com" >Big 10</a> 6. </li> 7. <li><a href="http://www.ivyleaguesports.com/" >Ivy League</a> 8. </li> 9. <li><a href="http://www.pac-10.org/" >Pac 10</a> 10. </li> 11.</ul> 12.


ul#conferences { 1. list-style-type: none; 2.} 3.


33 of 59 2/27/2007 7:48 PM

Display List Items "Inline"

display property

blockinlinenone

Example 4.22





Example 4.23


In example23.css


ul#conferences { 1. list-style-type: none; 2.} 3.ul#conferences li { 4. display: inline; 5.} 6.

<ul id="conferencenav" > 1. <li><a href="http://www.acc.org/" >ACC</a> 2. </li> 3. <li><a href="http://big12sports.collegesports.com/" >Bix XII</a> 4. </li> 5. <li><a href="http://bigten.collegesports.com" >Big 10</a> 6. </li> 7. <li><a href="http://www.ivyleaguesports.com/" >Ivy League</a> 8. </li> 9. <li><a href="http://www.pac-10.org/" >Pac 10</a> 10. </li> 11.</ul> 12.


34 of 59 2/27/2007 7:48 PM

In head element:



Inspired by: CSS Cookbook by Christopher Schmitt

ul#conferencenav { 1. list-style: none; 2. padding-bottom: 0.5em; 3. border-bottom: 2px solid black; 4. font-weight: bold; 5. font-family: Arial, Verdana, Helvetica, sans-serif; 6. color: #990000; 7.} 8.ul#conferencenav li { 9. display: inline; 10. list-style: none; 11. margin: 0; 12.} 13.ul#conferencenav a{ 14. padding: 0.5em 1em; 15. margin-right: 0.25em; 16. background-color: #dddd00; 17. border-top: 2px solid black; 18. border-left: 2px solid black; 19. border-right: 2px solid black; 20. text-decoration: none; 21. } 22.ul#conferencenav a:link { 23. color: #990000; 24.} 25.ul#conferencenav a:visited { 26. color: #990000; 27.} 28.ul#conferencenav a:hover { 29. color: #dddd00; 30. background-color: #990000; 31.} 32.



35 of 59 2/27/2007 7:48 PM

Using Lists for Navigation: Tabs

An unordered list:

Styled as "tabs":

The CSS properties that do most of the work here are:

display: inline; list-style: none;

Example 4.24





Example 4.25


<ul id="tabnavigation" > 1.<li><a href="http://www.acc.org/" >ACC</a></li> 2.<li><a href="http://big12sports.collegesports.com/" >Bix XII</a></li> 3.<li><a href="http://bigten.collegesports.com" >Big 10</a></li> 4.<li><a href="http://www.ivyleaguesports.com/" >Ivy League</a></li> 5.<li><a href="http://www.pac-10.org/" >Pac 10</a></li> 6.</ul> 7.

ul#conferences { 1. list-style-type: none; 2.} 3.ul#conferences li { 4. display: inline; 5.} 6.


36 of 59 2/27/2007 7:48 PM

In example25.css

In head element:




<ul id="tabnavigation" > 1.<li><a href="http://www.acc.org/" >ACC</a></li> 2.<li><a href="http://big12sports.collegesports.com/" >Bix XII</a></li> 3.<li><a href="http://bigten.collegesports.com" >Big 10</a></li> 4.<li><a href="http://www.ivyleaguesports.com/" >Ivy League</a></li> 5.<li><a href="http://www.pac-10.org/" >Pac 10</a></li> 6.</ul> 7.

ul#tabnavigation { 1. list-style: none; 2. padding-bottom: 0.5em; 3. border-bottom: 2px solid black; 4. font-weight: bold; 5. font-family: Arial, Verdana, Helvetica, sans-serif; 6. color: #990000; 7.} 8.ul#tabnavigation li { 9. display: inline; 10. list-style: none; 11. margin: 0; 12.} 13.ul#tabnavigation a{ 14. padding: 0.5em 1em; 15. margin-right: 0.25em; 16. background-color: #dddd00; 17. border-top: 2px solid black; 18. border-left: 2px solid black; 19. border-right: 2px solid black; 20. text-decoration: none; 21. } 22.ul#tabnavigation a:link { 23. color: #990000; 24.} 25.ul#tabnavigation a:visited { 26. color: #990000; 27.} 28.ul#tabnavigation a:hover { 29. color: #dddd00; 30. background-color: #990000; 31.} 32.



37 of 59 2/27/2007 7:48 PM

Lists as Navigation

Turn lists into side-bar navigation using the "list-style: none;". The "display: block" applied to the "a"element makes the whole area (not just the text) 'clickable'.

Example 4.26


In example26.css

<div id="navlhs" > 1.<ul> 2.<li><a href="http://www.baylor.edu/" >Baylor</a></li> 3.<li><a href="http://www.cu.edu/" >Colorado</a></li> 4.<li><a href="http://www.iastate.edu/" >Iowa State</a></li> 5.<li><a href="http://www.ku.edu/" >Kansas</a></li> 6.<li><a href="http://www.ksu.edu/" >Kansas State</a></li> 7.<li><a href="http://www.missouri.edu/" >Missouri</a></li> 8.<li><a href="http://www.unl.edu/" >Nebraska</a></li> 9.<li><a href="http://www.ou.edu/" >Oklahoma</a></li> 10.<li><a href="http://www.okstate.edu/" >Oklahoma State</a></li> 11.<li><a href="http://www.utexas.edu/" >Texas</a></li> 12.<li><a href="http://www.tamu.edu/" >Texas A&M</a></li> 13.<li><a href="http://www.ttu.edu/" >Texas Tech</a></li> 14.</ul> 15.</div> 16.


38 of 59 2/27/2007 7:48 PM

In head element:




#navlhs { 1. font-family: Arial, Verdana, Helvetica, sans-serif; 2. font-weight: bold; 3. font-size: 0.7em; 4. width: 15em; 5. border-right: 1px solid #333; 6. margin-bottom: 1em; 7. background-color: #ddd; 8. color: #900; 9.} 10.#navlhs ul { 11. list-style: none; 12. margin: 0; 13. padding: 0; 14.} 15.#navlhs ul li { 16. margin: 0; 17. border-top: 1px solid #333; 18.} 19.#navlhs ul li a { 20. display: block; 21. background-color: #ccc; 22. border-top: 1px solid #333; 23. border-left: 5px solid #333; 24. text-decoration: none; 25. padding: 2px 2px 2px 0.5em; 26.} 27.#navlhs a:link { 28. color: #900; 29.} 30.#navlhs a:visited { 31. color: #900; 32.} 33.#navlhs a:hover { 34. color: #fff; 35. background-color: #900; 36.} 37.



39 of 59 2/27/2007 7:48 PM

Lists as Navigation: Nested Lists

Nested lists are indented. We have the beginning of a "clamshell" navigation.

Example 4.27



40 of 59 2/27/2007 7:48 PM

<div id="navlhs" > 1.<ul> 2.<li><a href="http://big12sports.collegesports.com/" >Bix XII</a> 3.<ul> 4.<li><a href="http://www.baylor.edu/" >Baylor</a></li> 5.<li><a href="http://www.cu.edu/" >Colorado</a></li> 6.<li><a href="http://www.iastate.edu/" >Iowa State</a></li> 7.<li><a href="http://www.ku.edu/" >Kansas</a></li> 8.<li><a href="http://www.ksu.edu/" >Kansas State</a></li> 9.<li><a href="http://www.missouri.edu/" >Missouri</a></li> 10.<li><a href="http://www.unl.edu/" >Nebraska</a></li> 11.<li><a href="http://www.ou.edu/" >Oklahoma</a></li> 12.<li><a href="http://www.okstate.edu/" >Oklahoma State</a></li> 13.<li><a href="http://www.utexas.edu/" >Texas</a></li> 14.<li><a href="http://www.tamu.edu/" >Texas A&M</a></li> 15.<li><a href="http://www.ttu.edu/" >Texas Tech</a></li> 16.</ul> 17.</li><li><a href="http://www.ivyleaguesports.com/" >Ivy League</a> 18.<ul> 19.<li><a href="http://www.brown.edu/" >Brown</a> 20.</li><li><a href="http://www.columbia.edu/" >Columbia</a> 21.</li><li><a href="http://www.cornell.edu/" >Cornell</a> 22.</li><li><a href="http://www.dartmouth.edu/" >Dartmouth</a> 23.</li><li><a href="http://www.harvard.edu/" >Harvard</a></li> 24.<li><a href="http://www.upenn.edu/" >Penn</a> </li> 25.<li><a href="http://www.princeton.edu/" >Princeton</a></li> 26.<li><a href="http://www.yale.edu/" >Yale</a></li> 27.</ul> 28. 29.</li><li><a href="http://www.pac-10.org/" >Pac 10</a> 30.<ul> 31.<li><a href="http://www.arizona.edu/" >Arizona</a></li> 32.<li><a href="http://www.asu.edu/" >Arizona State</a></li> 33.<li><a href="http://www.berkeley.edu/" >California</a></li> 34.<li><a href="http://www.uoregon.edu/" >Oregon</a></li> 35.<li><a href="http://www.oregonstate.edu/" >Oregon State</a></li> 36.<li><a href="http://www.stanford.edu/" >Stanford</a></li> 37.<li><a href="http://www.ucla.edu/" >UCLA</a></li> 38.<li><a href="http://www.usc.edu/" >USC</a></li> 39.<li><a href="http://www.washington.edu/" >Washington</a></li> 40.<li><a href="http://www.wsu.edu/" >Washington State</a></li> 41.</ul> 42.</li> 43. 44.<li><a href="http://www.acc.org/" >ACC</a> 45.<ul> 46.<li><a href="http://www.bc.edu/" >Boston College</a></li> 47.<li><a href="http://www.clemson.edu/" >Clemson</a></li> 48.<li><a href="http://www.duke.edu/" >Duke</a></li> 49.<li><a href="http://www.fsu.edu/" >Florida State</a></li> 50.<li><a href="http://www.gatech.edu/" >Georgia Tech</a></li> 51.<li><a href="http://www.umd.edu/" >Maryland</a></li> 52.<li><a href="http://www.miami.edu/" >Miami (FL)</a></li> 53.<li><a href="http://www.unc.edu/" >North Carolina</a></li> 54.<li><a href="http://www.ncsu.edu/" >North Carolina State</a></li> 55.<li><a href="http://www.virginia.edu/" >Virginia</a></li> 56.<li><a href="http://www.vt.edu/" >Virginia Tech</a></li> 57.<li><a href="http://www.wfu.edu/" >Wake Forest</a></li> 58.</ul> 59.</li> 60.<li><a href="http://bigten.collegesports.com" >Big 10</a> 61.<ul> 62.<li><a href="http://www.illinois.edu/" >Illinois</a></li> 63.<li><a href="http://www.indiana.edu/" >Indiana</a></li> 64.<li><a href="http://www.uiowa.edu/" >Iowa</a></li> 65.<li><a href="http://www.umich.edu/" >Michigan</a></li> 66.<li><a href="http://www.msu.edu/" >Michigan State</a></li> 67.<li><a href="http://www.umn.edu/" >Minnesota</a></li> 68.<li><a href="http://www.northwestern.edu/" >Northwestern</a></li> 69.<li><a href="http://www.osu.edu/" >Ohio State</a></li> 70.<li><a href="http://www.psu.edu/" >Penn State</a></li> 71.<li><a href="http://www.purdue.edu/" >Purdue</a></li> 72.<li><a href="http://www.wisconsin.edu/" >Wisconsin</a></li> 73.</ul>74.


41 of 59 2/27/2007 7:48 PM

In example27.css

In head element:


#navlhs { 1. font-family: Arial, Verdana, Helvetica, sans-serif; 2. font-weight: bold; 3. font-size: 0.7em; 4. width: 10em; 5. border-right: 1px solid #333; 6. margin-bottom: 1em; 7. background-color: #ddd; 8. color: #900; 9.} 10.#navlhs ul { 11. list-style: none; 12. margin: 0; 13. padding: 0; 14.} 15.#navlhs ul li { 16. margin: 0; 17. border-top: 1px none #333; 18.} 19.#navlhs ul li a { 20. display: block; 21. background-color: #ccc; 22. border-top: 1px none #333; 23. border-right: 1px solid #333; 24. border-bottom: thin dotted #333; 25. border-left: 5px solid #333; 26. text-decoration: none; 27. padding: 2px 2px 2px 0.5em; 28.} 29.#navlhs a:link { 30. color: #900; 31.} 32.#navlhs a:visited { 33. color: #900; 34.} 35.#navlhs a:hover { 36. color: #fff; 37. background-color: #900; 38. border-top: 1px outset #333; 39. border-right: 1px outset #333; 40. border-bottom: 1px outset #333; 41. border-left: 5px outset #333; 42.} 43.#navlhs a:active { 44. color: #fff; 45. background-color: #900; 46. border-top: 1px inset #333; 47. border-right: 1px inset #333; 48. border-bottom: 1px inset #333; 49. border-left: 5px inset #333; 50.} 51.#navlhs ul ul a { 52. list-style: none; 53. padding-left: 1.5em; 54. font-size: 80%; 55. font-weight: normal; 56.} 57.#navlhs ul.collapse { display: none; } 58.



42 of 59 2/27/2007 7:48 PM




43 of 59 2/27/2007 7:48 PM

Lists as Navigation: Nested Lists

Label where we are ("Kansas"), what section we're in ("Big XII") and hide othre sections.

We'll use id names of "youarehere_section" and "youarehere_page", and then in the CSS, we'll use the immediate child selector (<) to style those "a" elements. In addition, we'll use a class of"collapse" to mark those sections that should not be shown.

#navlhs ul.collapse { display: none; }#navlhs ul li#youarehere_section > a {background-color: #999;}#navlhs ul li#youarehere_page > a {background-color: #eee;}

Example 4.28



44 of 59 2/27/2007 7:48 PM

<div id="navlhs" > 1.<ul> 2.<li id="youarehere_section" ><a href="http://big12sports.collegesports.com/" >Bix XII</a> 3.<ul> 4.<li><a href="http://www.baylor.edu/" >Baylor</a></li> 5.<li><a href="http://www.cu.edu/" >Colorado</a></li> 6.<li><a href="http://www.iastate.edu/" >Iowa State</a></li> 7.<li id="youarehere_page" ><a href="http://www.ku.edu/" >Kansas</a></li> 8.<li><a href="http://www.ksu.edu/" >Kansas State</a></li> 9.<li><a href="http://www.missouri.edu/" >Missouri</a></li> 10.<li><a href="http://www.unl.edu/" >Nebraska</a></li> 11.<li><a href="http://www.ou.edu/" >Oklahoma</a></li> 12.<li><a href="http://www.okstate.edu/" >Oklahoma State</a></li> 13.<li><a href="http://www.utexas.edu/" >Texas</a></li> 14.<li><a href="http://www.tamu.edu/" >Texas A&M</a></li> 15.<li><a href="http://www.ttu.edu/" >Texas Tech</a></li> 16.</ul> 17.</li><li><a href="http://www.ivyleaguesports.com/" >Ivy League</a> 18.<ul class="collapse" > 19.<li><a href="http://www.brown.edu/" >Brown</a> 20.</li><li><a href="http://www.columbia.edu/" >Columbia</a> 21.</li><li><a href="http://www.cornell.edu/" >Cornell</a> 22.</li><li><a href="http://www.dartmouth.edu/" >Dartmouth</a> 23.</li><li><a href="http://www.harvard.edu/" >Harvard</a></li> 24.<li><a href="http://www.upenn.edu/" >Penn</a> </li> 25.<li><a href="http://www.princeton.edu/" >Princeton</a></li> 26.<li><a href="http://www.yale.edu/" >Yale</a></li> 27.</ul> 28.</li><li><a href="http://www.pac-10.org/" >Pac 10</a> 29.<ul class="collapse" > 30.<li><a href="http://www.arizona.edu/" >Arizona</a></li> 31.<li><a href="http://www.asu.edu/" >Arizona State</a></li> 32.<li><a href="http://www.berkeley.edu/" >California</a></li> 33.<li><a href="http://www.uoregon.edu/" >Oregon</a></li> 34.<li><a href="http://www.oregonstate.edu/" >Oregon State</a></li> 35.<li><a href="http://www.stanford.edu/" >Stanford</a></li> 36.<li><a href="http://www.ucla.edu/" >UCLA</a></li> 37.<li><a href="http://www.usc.edu/" >USC</a></li> 38.<li><a href="http://www.washington.edu/" >Washington</a></li> 39.<li><a href="http://www.wsu.edu/" >Washington State</a></li> 40.</ul> 41.</li> 42.<li><a href="http://www.acc.org/" >ACC</a> 43.<ul class="collapse" > 44.<li><a href="http://www.bc.edu/" >Boston College</a></li> 45.<li><a href="http://www.clemson.edu/" >Clemson</a></li> 46.<li><a href="http://www.duke.edu/" >Duke</a></li> 47.<li><a href="http://www.fsu.edu/" >Florida State</a></li> 48.<li><a href="http://www.gatech.edu/" >Georgia Tech</a></li> 49.<li><a href="http://www.umd.edu/" >Maryland</a></li> 50.<li><a href="http://www.miami.edu/" >Miami (FL)</a></li> 51.<li><a href="http://www.unc.edu/" >North Carolina</a></li> 52.<li><a href="http://www.ncsu.edu/" >North Carolina State</a></li> 53.<li><a href="http://www.virginia.edu/" >Virginia</a></li> 54.<li><a href="http://www.vt.edu/" >Virginia Tech</a></li> 55.<li><a href="http://www.wfu.edu/" >Wake Forest</a></li> 56.</ul> 57.</li> 58.<li><a href="http://bigten.collegesports.com" >Big 10</a> 59.<ul class="collapse" > 60.<li><a href="http://www.illinois.edu/" >Illinois</a></li> 61.<li><a href="http://www.indiana.edu/" >Indiana</a></li> 62.<li><a href="http://www.uiowa.edu/" >Iowa</a></li> 63.<li><a href="http://www.umich.edu/" >Michigan</a></li> 64.<li><a href="http://www.msu.edu/" >Michigan State</a></li> 65.<li><a href="http://www.umn.edu/" >Minnesota</a></li> 66.<li><a href="http://www.northwestern.edu/" >Northwestern</a></li> 67.<li><a href="http://www.osu.edu/" >Ohio State</a></li> 68.<li><a href="http://www.psu.edu/" >Penn State</a></li> 69.<li><a href="http://www.purdue.edu/" >Purdue</a></li> 70.<li><a href="http://www.wisconsin.edu/" >Wisconsin</a></li> 71.</ul> 72.</li> 73.</ul>74.


45 of 59 2/27/2007 7:48 PM

In example28.css

In head element:

#navlhs { 1. font-family: Arial, Verdana, Helvetica, sans-serif; 2. font-weight: bold; 3. font-size: 0.7em; 4. width: 10em; 5. border-right: 1px solid #333; 6. margin-bottom: 1em; 7. background-color: #ddd; 8. color: #900; 9.} 10.#navlhs ul { 11. list-style: none; 12. margin: 0; 13. padding: 0; 14.} 15.#navlhs ul li { 16. margin: 0; 17. border-top: 1px none #333; 18.} 19.#navlhs ul li a { 20. display: block; 21. background-color: #ccc; 22. border-top: 1px none #333; 23. border-right: 1px solid #333; 24. border-bottom: thin dotted #333; 25. border-left: 5px solid #333; 26. text-decoration: none; 27. padding: 2px 2px 2px 0.5em; 28.} 29.#navlhs a:link { 30. color: #900; 31.} 32.#navlhs a:visited { 33. color: #900; 34.} 35.#navlhs a:hover { 36. color: #fff; 37. background-color: #900; 38. border-top: 1px outset #333; 39. border-right: 1px outset #333; 40. border-bottom: 1px outset #333; 41. border-left: 5px outset #333; 42.} 43.#navlhs a:active { 44. color: #fff; 45. background-color: #900; 46. border-top: 1px inset #333; 47. border-right: 1px inset #333; 48. border-bottom: 1px inset #333; 49. border-left: 5px inset #333; 50.} 51.#navlhs ul ul a { 52. list-style: none; 53. padding-left: 1.5em; 54. font-size: 80%; 55. font-weight: normal; 56.} 57.#navlhs ul.collapse { display: none; } 58.#navlhs ul li#youarehere_section > a {background-color: #999;} 59.#navlhs ul li#youarehere_page > a {background-color: #eee;} 60.



46 of 59 2/27/2007 7:48 PM





47 of 59 2/27/2007 7:48 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.

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

Example 4.29


In example29.css

<div id="breadcrumb" > 1.<ul> 2. <li> <a href="http://dmoz.org/" >Top</a> 3. <ul> 4. <li> <a href="http://dmoz.org/Science/" >Science</a> 5. <ul> 6. <li> <a href="http://dmoz.org/Science/Biology/" >Biology</a> 7. <ul> 8. <li> <a href="http://dmoz.org/Science/Biology/Genetics/" > 9. Genetics</a> 10. <ul> 11. <li> <a href="http://dmoz.org/Science/Biology/Genetics/Genomics/" > 12. Genomics</a> 13. <ul> 14. <li> 15. <span>Pharmacogenetics</span> 16. </li> 17. </ul> 18. </li> 19. </ul> 20. </li> 21. </ul> 22. </li> 23. </ul> 24. </li> 25. </ul> 26. </li> 27.</ul> 28.</div> 29.


48 of 59 2/27/2007 7:48 PM

In head element:



#breadcrumb a:link , 1.#breadcrumb a:visited , 2.#breadcrumb a:hover , 3.#breadcrumb a:active , 4.#breadcrumb li span 5.{ 6. padding: 0.5em; 7. text-decoration: none; 8. font-family: Tahoma, Arial, Helvetica, sans-serif; 9. color: navy; 10. font-size: small; 11. font-weight: normal; 12.} 13.#breadcrumb a:hover { 14. text-decoration: underline; 15.} 16.#breadcrumb li span { color: black; } 17.#breadcrumb { 18. background-color: #ddd; 19.} 20.#breadcrumb ul { 21. display: inline; 22. padding-left: 0; 23. margin-left: 0; 24.} 25.#breadcrumb ul li { 26. display: inline; 27.} 28.#breadcrumb ul ul li { 29. background-image: url(images/arrow.gif); 30. background-repeat: no-repeat; 31. background-position: left; 32. padding-left: 25px; 33.} 34.



49 of 59 2/27/2007 7:48 PM

media selector

CSS2 defines a media selector for different media types.

Incorporate as part of the "link" element:

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

allSuitable for all devices.

brailleIntended for braille tactile feedback devices.

embossedIntended for paged braille printers.

handheldIntended for handheld devices (typically small screen, limited bandwidth).

printIntended for paged material and for documents viewed on screen in print preview mode.

projectionIntended for projected presentations, for example projectors.

screenIntended primarily for color computer screens.

speechIntended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for thispurpose.

ttyIntended for media using a fixed-pitch character grid (such as teletypes, terminals, or portabledevices with limited display capabilities).

tvIntended for television-type devices (low resolution, color, limited-scrollability screens, soundavailable).

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

@media print { 1. body {font-size: 10pt;} 2.} 3.@media screen { 4. body {font-size: 12pt;} 5.} 6.@media print { 7. div.navigation {display: none;} 8. hr {page-break-after: always;} 9.} 10.


50 of 59 2/27/2007 7:48 PM

Harvard College Funding Database

Screen display (screen.css):

Print display (print.css):

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


51 of 59 2/27/2007 7:48 PM


52 of 59 2/27/2007 7:48 PM

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 BertBos was printed using CSS.

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

53 of 59 2/27/2007 7:48 PM

Resources

Dan Cederholm

Westciv: CSS and web standards tutorialsPublications from Dan Cederholm from SimpleBits

Eric Meyer

meyerweb.comEric Meyer CSS Workcss / edge

Books

CSS Cookbook by Christopher SchmittCascading Style Sheets : Designing for the Web (3rd Edition) by Hakon Wium Lie and Bert BosCascading Style Sheets: The Definitive Guide, 3rd Edition by Eric Meyer Eric Meyer on CSS and More Eric Meyer on CSSWeb Standards Solutions: The Markup and Style Handbook by Dan Cederholm

Specifications / Resources

W3C Cascading Style SheetsCascading Style Sheets, Level 1Cascading Style Sheets, Level 2Cascading Style Sheets 2.1W3C CSS Validation ServiceW3C Core Styles


54 of 59 2/27/2007 7:48 PM

Yahoo! UI Library

Yahoo! User Interface LibraryYUI Grids CSS

Examples

GridsNested grid: 3/4, 1/4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">1.<html> 2.<head> 3. <title>Grids CSS Example - YUI Grids</title> 4. <link type="text/css" rel="stylesheet" href="../../build/reset-fonts-grids/reset-fonts5.</head> 6. 7.<body id="yahoo-com"> 8.<div id="doc" class="yui-t1"> 9. <div id="hd"> 10. <p>MASTHEAD: ... 11. </div> 12. <div id="bd"> 13. <div id="yui-main"> 14. <div class="yui-b"> 15. <div class="yui-ge"> 16. <div class="yui-u first"> 17. <p>Lorem ipsum dolor sit amet...</p> 18. </div> 19. 20. <div class="yui-u"> 21. <p>Lorem ipsum dolor sit amet...</p> 22. </div> 23. </div> 24. </div> 25. </div> 26. <div class="yui-b"> 27. <p>SECONDARY: Lorem ipsum dolor sit amet...</p> 28. </div> 29. </div> 30. <div id="ft"> 31. <p>FOOTER: Lorem ipsum dolor sit amet...</p> 32. </div> 33.</div> 34.</body> 35.</html> 36. 37.


55 of 59 2/27/2007 7:48 PM

YUI Grids Applied to Harvard Homepage

Harvard Home Page

Tables exposed:


56 of 59 2/27/2007 7:48 PM

Beginning the transformation...

Beginnings of Harvard Homepage with CSS6k of XHTML vs. 21k of HTMLXHTML 1.0 Strict vs. Non-validating HTML 4.0160 lines of XHTML vs. 562 lines of HTML


57 of 59 2/27/2007 7:48 PM


58 of 59 2/27/2007 7:48 PM


59 of 59 2/27/2007 7:48 PM

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

cascading style sheets (css) - cscie12.dce.harvard.edu · pseudo-classes and elements css 2.1...

Documents