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]Cascading Style Sheets (CSS) http://localhost:8080/cocoon/projects/cscie12/slides/20070227/handout.html 2 of 59 2/27/2007 7:48 PM Properties CSS Level 1 lists 53 properties that let you style properties of: font color text boxes (border, padding, margins) classification (inline, block, list) CSS Level 2.1 lists 105 properties.
30
Embed
Cascading Style Sheets (CSS)cscie12.dce.harvard.edu/lecture_notes/2006-07/20070227.pdf2007/02/27 · 2/27/2007 7:48 PM Class Names You can choose class names when authoring your CSS
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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:
Example 4.2 Rendered:
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.
The link element can reference an external stylesheet.
Example 4.3
Example 4.3 Source:
In example3.css
In head element:
Example 4.3 Rendered:
With StylesWithout Styles
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.
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:
In style element (<style type="text/css">) within head element:
Example 4.4 Rendered:
With StylesWithout Styles
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.
In style element (<style type="text/css">) within head element:
Example 4.5 Rendered:
With StylesWithout Styles
<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.
<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.
In style element (<style type="text/css">) within head element:
<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.
In style element (<style type="text/css">) within head element:
<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.
In style element (<style type="text/css">) within head element:
Example 4.9 Rendered:
With StylesWithout Styles
Example 4.10
Example 4.10 Source:
In style element (<style type="text/css">) within head element:
Example 4.10 Rendered:
With StylesWithout Styles
<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.
<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.
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
Example 4.12 Source:
In style element (<style type="text/css">) within head element:
Example 4.12 Rendered:
With StylesWithout Styles
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.
In style element (<style type="text/css">) within head element:
Example 4.13 Rendered:
With StylesWithout Styles
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.
In style element (<style type="text/css">) within head element:
<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.
Remember that the "float" occurs within the containing box (parent block).
Float the block from our earlier example:
Example 4.15
Example 4.15 Source:
In style element (<style type="text/css">) within head element:
<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.
<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.
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'.
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;}
"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.
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