Cascading Style Sheets (CSS) http://localhost:8080/cocoon/projects/cscie12/slides/20080220/handout.html 1 of 83 2/20/2008 10:52 AM Table of Contents | All Slides | Link List | Examples | CSCI E-12 Cascading Style Sheets (CSS) February 20, 2008 Harvard University Division of Continuing Education Extension School Course Web Site: http://cscie12.dce.harvard.edu/ Copyright 1998-2008 David P. Heitmeyer Instructor email: [email protected]Course staff email: [email protected]Cascading Style Sheets (CSS) http://localhost:8080/cocoon/projects/cscie12/slides/20080220/handout.html 2 of 83 2/20/2008 10:52 AM CSS Resources Chapters in Web Design in a Nutshell Head First HTML with CSS & XHTML Westciv: CSS and web standards tutorials Eric Meyer meyerweb.com Eric Meyer CSS Work css / edge Dan Cederholm Publications from Dan Cederholm from SimpleBits Books
42
Embed
Cascading Style Sheets (CSS) - Harvard University · 2008-09-05 · Cascading Style Sheets (CSS) 5 of 83 2/20/2008 10:52 AM style attribute Example 4.1 Example ...
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.
Cascading 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 CSSBulletproof Web Design, 2nd edition, by Dan CederholmWeb Standards Solutions: The Markup and Style Handbook by Dan CederholmCSS Cookbook by Christopher Schmitt
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. Nullaconvallis ante sit amet urna. Maecenas condimentum hendrerit turpis.
view plain print ?
<p style="color: black; background-color: teal; padding: 1em; font-family: helvetica, s1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec2. facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce vel3. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis4. ante sit amet urna. Maecenas condimentum hendrerit turpis. </p> 5.
In style element (<style type="text/css">) within head element:
Example 4.2 Rendered:
With StylesWithout Styles
view plain print ?
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci n1. facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce vel2. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis3. 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
view plain print ?
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci ne1. facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce vel2. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis3. sit amet urna. Maecenas condimentum hendrerit turpis. </p> 4.
In style element (<style type="text/css">) within head element:
Example 4.4 Rendered:
With StylesWithout Styles
CSS Rule
Selector and Declarations
view plain print ?
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci n1. facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce vel2. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis3. sit amet urna. Maecenas condimentum hendrerit turpis. </p> 4.
The class and id attributes of XHTML elements can be used in conjunction with styles.
Example 4.5
Example 4.5 Source:
In style element (<style type="text/css">) within head element:
Example 4.5 Rendered:
With StylesWithout Styles
view plain print ?
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci 1. nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div>2.<div class="withstyle" >Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, 3. commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum 4. hendrerit turpis.</div> 5.<div class="warn" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras 6. sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim 7. velit at orci.</div> 8.<div>Lorem ipsum dolor sit amet, 9. <span class="warn" >consectetuer adipiscing elit</span>. Cras sollicitudin, orci nec 10. facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div> 11.<div id="legalese" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras 12. sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim 13. velit at orci.</div> 14.
In style element (<style type="text/css">) within head element:
Example 4.6 Rendered:
With StylesWithout Styles
view plain print ?
<div id="header" ><h1>Lorem ipsum dolor</h1></div> 1.<div id="main" > 2. <!-- main content --> 3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras 4. sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim 5. velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo 6. vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit 7. turpis. </div> 8.<div id="footer" >Nulla turpis erat, faucibus commodo, iaculis id, aliquet quis, lectus9. Pellentesque habitant morbi tristique senectus et netus et malesuada 10. fames ac turpis egestas.</div> 11.
In style element (<style type="text/css">) within head element:
Example 4.7 Rendered:
With StylesWithout Styles
view plain print ?
<div> <em>Emphasized text</em> outside of <strong>li</strong> appear "normal". 1. <ul> 2. <li><em>Emphasized text</em> within <strong>li</strong> have a different 3. style.</li> 4. </ul> </div> 5.
Properties are typically inherited by children elements.
Example 4.8
Example 4.8 Source:
In style element (<style type="text/css">) within head element:
Example 4.8 Rendered:
With StylesWithout Styles
view plain print ?
<div> Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Cras 1. sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim v2. at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, 3. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.</div> 4.<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci ne5. facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce vel6. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis7. sit amet urna. Maecenas condimentum hendrerit turpis.</p> 8.
<div style="font-variant: small-caps;" >This should be rendered in small-caps. 1.<div style="font-variant: normal;" >Here we revert to "normal". 2.</div> 3.</div> 4.
view plain print ?
<div> 1.font-weight can be used to make things <span style="font-weight: bold" >bold</span>. 2.</div> 3.
Praesent tincidunt, elit porta elementum pharetra, magna odio consequat nisi, eu iaculis mauris massa eu eros.
By Name:
Example 4.14
Example 4.14 Source:
Example 4.14 Rendered:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.
view plain print ?
<p style="font-size: xx-small;" >Lorem ipsum dolor sit amet, consectetuer adipiscing el1. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis e2. velit at orci.</p> 3.<p style="font-size: x-small;" >Lorem ipsum dolor sit amet, consectetuer adipiscing eli4. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis e5. velit at orci.</p> 6.<p style="font-size: small;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit.7. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis e8. velit at orci.</p> 9.<p style="font-size: medium;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit10. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis e11. velit at orci.</p> 12.<p style="font-size: large;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit.13. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis e14. velit at orci.</p> 15.<p style="font-size: x-large;" >Lorem ipsum dolor sit amet, consectetuer adipiscing eli16. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis e17. velit at orci.</p> 18.<p style="font-size: xx-large;" >Lorem ipsum dolor sit amet, consectetuer adipiscing el19. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis e20. velit at orci.</p> 21.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, utsagittis enim velit at orci.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, nequeurna porta risus, ut sagittis enim velit at orci.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisisvehicula, neque urna porta risus, ut sagittis enim velit at orci.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orcinec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Crassollicitudin, 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 facilisisvehicula, neque urna porta risus, ut sagittis enim velit at orci.
Relative Names:
Example 4.15
Example 4.15 Source:
Example 4.15 Rendered:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisisvehicula, 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
view plain print ?
<div style="font-size: medium" > 1.<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 2. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis e3. velit at orci.</p> 4. <p style="font-size: smaller;" >Lorem ipsum dolor sit amet, consectetuer adipiscing5. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis e6. velit at orci.</p> 7.<p style="font-size: larger" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit.8. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis e9. velit at orci.</p> 10. </div> 11.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orcinec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.
Relative Units:
Example 4.16
Example 4.16 Source:
Example 4.16 Rendered:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna portarisus, ut sagittis enim velit at orci.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, utsagittis enim velit at orci.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci necfacilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Crassollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.
Absolute Units:
Example 4.17
Example 4.17 Source:
view plain print ?
<div style="font-size: medium" > 1.<p style="font-size: 80%;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 2. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis e3. velit at orci.</p> 4.<p style="font-size: 0.75em;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit5. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis e6. velit at orci.</p> 7.<p style="font-size: 110%;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 8. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis e9. velit at orci.</p> 10.<p style="font-size: 1.5em;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit.11. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis e12. velit at orci.</p> 13. </div> 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, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urnaporta risus, ut sagittis enim velit at orci.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci necfacilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.
Lorem ipsum dolor sit amet.
view plain print ?
<p style="font-size: 7pt;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 1. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis e2. velit at orci.</p> 3.<p style="font-size: 10pt;" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 4. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis e5. velit at orci.</p> 6.<p style="font-size: 14pt" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 7. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis e8. velit at orci.</p> 9.<p style="font-size: 24pt" >Lorem ipsum dolor sit amet.</p> 10.
As a general guideline with CSS, relative measurements are better than absolute measurements.
Units for Font Sizes
RelativeRelative Sizes (to UA settings):xx-small | x-small | small | medium | large | x-large | xx-largeRelative Sizes (to context): larger | smallerPercentage (%)"em" units
Relative size are relative to parent. Nested div elements with font-size: 85% and margin-left: 50px have properties of:
1st div:85% font size20px left margin
2nd div:85% × 85% = 72.25% font size20px + 20px = 40px left margin
3rd div:85% × 85% × 85% = 61.4% font size20px + 20px + 20px = 60px left margin
4th div:85% × 85% × 85% × 85% = 52.2% font size20px + 20px + 20px + 20px = 80px left margin
Example 4.18
Example 4.18 Source:
view plain print ?
<p> Donec in turpis id massa dictum laoreet. Lorem ipsum dolor sit amet, consectetuer 1. adipiscing elit. Cras iaculis felis id tellus. Mauris vitae mauris pellentesque nisl 2. accumsan dignissim. </p> 3.<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ultricies 4. vestibulum urna. Phasellus et nibh quis felis semper vehicula. Nam varius enim vitae 5. dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubil6. Curae; Nunc mollis. 7. <div>Ut urna ante, semper ut, malesuada gravida, vulputate id, lacus. Mauris eu justo8. mattis nibh tempus dapibus. Lorem ipsum dolor sit amet, consectetuer adipiscing eli9. Maecenas adipiscing. Donec turpis odio, interdum vitae, ultrices vel, mattis quis, 10. dui. 11. <div>Nunc non urna nec lorem porta varius. Sed malesuada elit non augue. Vestibulum12. nulla. Aenean orci. Ut sem leo, placerat quis, ultricies nec, lacinia in, ante. P13. leo elit, dignissim nec, tincidunt dictum, mattis et, arcu. 14. <div>Pellentesque non risus quis justo posuere pellentesque. Donec posuere, purus15. sit amet sollicitudin laoreet, nisl magna ultricies elit, nec condimentum augue16. elit sit amet erat. Fusce egestas. Nulla vulputate, erat nec tempor mollis, aug17. metus feugiat urna, id nonummy velit arcu in metus. </div> </div> </div> </div>18.
In CSS, there are various shorthandproperties; these allow you to define several properties in a single place.[font-style | font-variant | font-weight ]? font-size[/line-height]? font-family
Example 4.19
Example 4.19 Source:
In style element (<style type="text/css">) within head element:
Example 4.19 Rendered:
With StylesWithout Styles
view plain print ?
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci 1. facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce vel2. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis3. sit amet urna. Maecenas condimentum hendrerit turpis. </div> 4.
view plain print ?
body { 1. font: normal normal normal 12pt/200% arial, helvetica, sans-serif; 2.} 3.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fuscevelit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nullaconvallis ante sit amet urna. Maecenas condimentum hendrerit turpis.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
view plain print ?
<div style="width: 30%;" > 1. <p style="text-align: left" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit2. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis3. velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo4. vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit 5. turpis. </p> 6. <p style="text-align: right" >Lorem ipsum dolor sit amet, consectetuer adipiscing eli7. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis8. velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo9. vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit 10. turpis. </p> 11. <p style="text-align: justify" >Lorem ipsum dolor sit amet, consectetuer adipiscing 12. elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut 13. sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursu14. commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum 15. hendrerit turpis. </p> 16. <p style="text-align: center" >Lorem ipsum dolor sit amet, consectetuer adipiscing 17. elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut 18. sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursu19. commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum 20. hendrerit turpis. </p></div> 21.
Cras sollicitudin, orci nec facilisis vehicula, neque
urna porta risus, ut sagittis enim velit at orci. Fusce
velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla
convallis ante sit amet urna. Maecenas condimentum
hendrerit turpis.
Lorem ipsum dolor sit amet,consectetuer adipiscing elit.Cras sollicitudin, orci necfacilisis vehicula, nequeurna porta risus, ut sagittisenim velit at orci. Fuscevelit. Integer sapien enim,rhoncus vitae, cursus non,commodo vitae, felis. Nullaconvallis ante sit amet urna.Maecenas condimentumhendrerit turpis.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Cras sollicitudin, orci nec facilisis vehicula, neque
urna porta risus, ut sagittisenim velit at orci. Fusce
velit. Integer sapien enim, rhoncus vitae, cursus non,commodo vitae, felis. Nulla convallis ante sit amet urna.
border is a shorthand notation that allows you to set border-width, border-style, border-color in one statement.
Example 4.22
Example 4.22 Source:
In style element (<style type="text/css">) within head element:
view plain print ?
<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 5. nonummy egestas. </p> 6. <h4>Dashed</h4> 7. <p class="border2" > Etiam eu arcu quis lectus semper sodales. Donec vitae risus. 8. Integer sollicitudin imperdiet dolor. Donec vehicula. Aliquam ut sapien sed eros 9. imperdiet pharetra. Donec accumsan scelerisque leo. Sed eros nunc, pellentesque 10. et, mollis non, faucibus venenatis, tortor. </p> 11. <h4>Outset</h4> 12. <p class="border3" > Pellentesque a velit. Sed pharetra vestibulum mauris. Ut vel 13. arcu. Cras dolor ligula, eleifend et, ultrices nec, viverra in, ipsum. In convallis14. pharetra lacus. Etiam tellus. Aliquam quam. Vivamus mattis purus nec quam. 15. </p> 16. <h4>Solid</h4> 17. <p class="border4" > Etiam rhoncus. Praesent id neque et odio dictum varius. Integer 18. imperdiet blandit orci. Donec nec nunc posuere augue egestas accumsan. Nunc nonummy19. metus ut nunc. In id turpis vitae nisl eleifend bibendum. Curabitur cursus aliquam 20. dolor. </p> 21. <h4>Double</h4> 22. <p class="border5" > Duis id erat a tortor laoreet aliquet. Quisque consectetuer 23. lobortis mauris. Donec pede. Cras non turpis vel tortor iaculis nonummy. Ut 24. facilisis viverra sem. Morbi pretium iaculis ligula. Praesent lectus. Aenean vel 25. ante. </p> 26. <h4>Groove</h4> 27. <p class="border6" > Aliquam leo nunc, congue a, imperdiet eget, aliquet ac, tortor. 28. Sed ac est. Vivamus nisi. Mauris in nisl. Sed ultricies nunc vel nunc. In dignissim29. consequat arcu. Sed in risus. Nulla facilisi. Integer purus urna, laoreet vitae, 30. congue a, posuere ut, ipsum. </p> 31. <h4>Ridge</h4> 32. <p class="border7" > Vivamus dictum, sem in vulputate vestibulum, est tellus tempus 33. dolor, ut laoreet arcu metus eu orci. Sed enim augue, dignissim sed, porta sed, 34. dapibus ac, nibh. Nunc mattis ipsum eu lectus. </p> 35. <h4>Inset</h4> 36. <p class="border8" > Maecenas consectetuer, lectus ac tempus iaculis, leo ipsum 37. tincidunt erat, et aliquam libero nulla ac ipsum. Nam turpis leo, feugiat vel, 38. nonummy id, ornare a, arcu. Vestibulum porta, justo et ornare porta, neque eros 39. vestibulum libero, semper iaculis augue turpis eu neque. </p> 40. <h4>None</h4> 41. <p class="border9" > Maecenas consectetuer, lectus ac tempus iaculis, leo ipsum 42. tincidunt erat, et aliquam libero nulla ac ipsum. Nam turpis leo, feugiat vel, 43. nonummy id, ornare a, arcu. </p> 44.</div> 45.
In style element (<style type="text/css">) within head element:
Example 4.23 Rendered:
view plain print ?
<div> 1.<div class="about" > Drafted by Thomas Jefferson between June 11 and June 28, 1776, the2. Declaration of Independence is at once the nation's most cherished symbol of liberty 3. Jefferson's most enduring monument.</div> 4.<div> We hold these truths to be self-evident, that all men are created equal, that the5. 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. Th8. whenever any Form of Government becomes destructive of these ends, it is the Right of9. People to alter or to abolish it, and to institute new Government, laying its foundat10. such principles and organizing its powers in such form, as to them shall seem most li11. effect their Safety and Happiness. </div> 12.</div> 13.
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground (a shorthand property)
Background Image with CSS
A background image with CSS:
Example 4.24
Example 4.24 Source:
In style element (<style type="text/css">) within head element:
Example 4.24 Rendered:
With StylesWithout Styles
Repeat
Repeat on y-axis only:
view plain print ?
<div style="margin-left: 45%; margin-right: 45%;" > Lorem ipsum dolor sit amet, 1. consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque u2. porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncu3. vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas4. condimentum hendrerit turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing eli5. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis e6. velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo v7. felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </d8.
view plain print ?
body { background-image: url(images/shield-background.gif);} 1.
In style element (<style type="text/css">) within head element:
Example 4.25 Rendered:
With StylesWithout Styles
Center and Fix
Center, Don't Repeat and Fix position:
Example 4.26
view plain print ?
<div style="margin-left: 45%; margin-right: 45%;" > Lorem ipsum dolor sit amet, 1. consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque u2. porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncu3. vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas4. condimentum hendrerit turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing eli5. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis e6. velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo v7. felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </d8.
In style element (<style type="text/css">) within head element:
Example 4.26 Rendered:
With StylesWithout Styles
view plain print ?
<div style="margin-left: 45%; margin-right: 45%;" > 1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec f2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec f3.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec f4.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec f5.</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.28
Example 4.28 Source:
In style element (<style type="text/css">) within head element:
Example 4.28 Rendered:
With StylesWithout Styles
view plain print ?
<div id="ustitle" > 1.<h1>United States Constitution</h1> 2.</div> 3.<div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan ipsum et li4. Donec tincidunt. Duis non nulla a tortor sagittis bibendum. Nunc ante. Vestibulum 5. vulputate. Aliquam ultricies, est vitae mattis ornare, leo pede lacinia mi, vitae pha6. turpis enim sed turpis. Mauris lorem. Ut rhoncus. Fusce congue ultricies est. Nulla 7. dignissim sagittis ipsum. Vivamus eu lectus non enim dignissim imperdiet. Nulla facil8. Integer euismod cursus erat. </div> 9.
In style element (<style type="text/css">) within head element:
Example 4.29 Rendered:
With StylesWithout Styles
first-line pseudo element
Example 4.30
Example 4.30 Source:
In style element (<style type="text/css">) within head element:
view plain print ?
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci n1. facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce vel2. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis3. sit amet urna. Maecenas condimentum hendrerit turpis. </p> 4.
view plain print ?
p:first-letter { font-size: 400%; } 1.
view plain print ?
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci n1. facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce vel2. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis3. sit amet urna. Maecenas condimentum hendrerit turpis. </p> 4.
Opening paragraph with first-letter pseudo element.
Example 4.31
Example 4.31 Source:
In style element (<style type="text/css">) within head element:
Example 4.31 Rendered:
With StylesWithout Styles
view plain print ?
p:first-line { font-variant: small-caps; } 1.
view plain print ?
<p class="opener" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras 1. sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim v2. at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, 3. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p> 4.<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci ne5. facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce vel6. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis7. sit amet urna. Maecenas condimentum hendrerit turpis. </p> 8.
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.
Good Class/ID Names Bad Class Names
globalnavsitenavgalleryimgcaptionasidewarning
thinborderrightcolumnrightnavredboldcenter
Choosing class and id names appropriately will help with:
evolution Your #rightnav may very well become navigation positioned on the left side or the top. Your .redbold may very be changed to another color or background entirely.specificity and semantics If you have a .dottedborderclass, you may wish to change how your thumbnail images are styled, but leavepresentation of other markup that you've given the same class to unchanged.
In style element (<style type="text/css">) within head element:
view plain print ?
<div> 1. <div class="about" >Drafted by Thomas Jefferson between June 11 and June 28, 1776, th2. Declaration of Independence is at once the nation's most cherished symbol of libert3. Jefferson's most enduring monument.</div> 4. <div> We hold these truths to be self-evident, that all men are created equal, that t5. endowed by their Creator with certain unalienable Rights, that among these are Life6. Liberty, and the pursuit of Happiness. That to secure these rights, Governments are7. instituted among Men, deriving their just powers from the consent of the governed. 8. whenever any Form of Government becomes destructive of these ends, it is the Right 9. People to alter or to abolish it, and to institute new Government, laying its found10. such principles and organizing its powers in such form, as to them shall seem most 11. effect their Safety and Happiness. </div> 12.</div> 13.
In style element (<style type="text/css">) within head element:
view plain print ?
<div> 1. <div class="about" >Drafted by Thomas Jefferson between June 11 and June 28, 1776, th2. Declaration of Independence is at once the nation's most cherished symbol of libert3. Jefferson's most enduring monument.</div> 4. <div> We hold these truths to be self-evident, that all men are created equal, that t5. endowed by their Creator with certain unalienable Rights, that among these are Life6. Liberty, and the pursuit of Happiness. That to secure these rights, Governments are7. instituted among Men, deriving their just powers from the consent of the governed. 8. whenever any Form of Government becomes destructive of these ends, it is the Right 9. People to alter or to abolish it, and to institute new Government, laying its found10. such principles and organizing its powers in such form, as to them shall seem most 11. effect their Safety and Happiness. </div> 12.</div> 13.
Use float: left and float: right for content to be on opposite sides.
Example 4.35
Example 4.35 Source:
In style element (<style type="text/css">) within head element:
Example 4.35 Rendered:
With StylesWithout Styles
The background color of the parent div did not display. The content of this div has been"floated," therefore it has been removed from the calculation of its box model. The parent div
We want to float one element left, the other right. We want content to be between the floatedelements.
Example 4.37
Example 4.37 Source:
In style element (<style type="text/css">) within head element:
Example 4.37 Rendered:
With StylesWithout Styles
Make the middle content not wrap around the floated contents (set margin for the middle
view plain print ?
<p class="first" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat1. sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. 2. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque 3. mauris turpis eu purus.</p> 4. <p class="second" >Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit ame5. fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede 6. lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing 7. diam at enim. Vestibulum nibh.</p> 8. <p>Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis 9. volutpat. Nulla vulputate, erat nec tempor mollis, augue metus feugiat urna, id 10. nonummy velit arcu in metus. Donec nonummy, pede non convallis commodo, enim velit 11. ornare nulla, vitae suscipit risus urna eget magna. Maecenas aliquam arcu ac turpis.12. Ut pellentesque porta turpis. n vitae erat. Nam lacinia imperdiet lorem. Aliquam 13. ullamcorper ultrices dui. 14. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus 15. mus. Proin quis orci eu erat molestie varius. Praesent condimentum orci in lectus. U16. ipsum. In hac habitasse platea dictumst. </p> 17.
In style element (<style type="text/css">) within head element:
Example 4.38 Rendered:
With StylesWithout Styles
view plain print ?
<p class="first" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat1. sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. 2. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque 3. mauris turpis eu purus.</p> 4. <p class="second" >Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit ame5. fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede 6. lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing 7. diam at enim. Vestibulum nibh.</p> 8. <p class="third" >Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam 9. non magna mattis volutpat. Nulla vulputate, erat nec tempor mollis, augue metus 10. feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede non convallis 11. commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna. Maecenas 12. aliquam arcu ac turpis. Ut pellentesque porta turpis.n vitae erat. Nam lacinia 13. imperdiet lorem. Aliquam ullamcorper ultrices dui. 14. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus 15. mus. Proin quis orci eu erat molestie varius. Praesent condimentum orci in lectus. U16. ipsum. In hac habitasse platea dictumst. </p> 17.
Here each "program" is wrapped in a div, which contains a thumbnail and a caption. The divelements are sized (height and width set) and floated. The result is a table-like layout that isflexible for varying widths of the browser window.