1 / 40

Understanding CSS: Enhance Web Design and Maintainability

This guide explores the role of CSS in web development, distinguishing it from HTML and JavaScript. Learn why CSS is crucial for separating presentation from content, creating leaner web pages, and simplifying maintenance. Discover how CSS specificity works, along with the significance of class and ID selectors, pseudo-classes, and inheritance. Additionally, gain insights into building style sheets effectively for various media types. This resource aims to enhance your understanding of CSS and improve your web design skills.

hani
Download Presentation

Understanding CSS: Enhance Web Design and Maintainability

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS: Beyond the Code Karen Perone Rodman Public Library peroneka@oplin.org

  2. HTML vs. CSS vs. Javascript • HTML for content (text, images, sound) • CSS for presentation (layout, color) • Javascript for behavior (cursor in the box, form field validation)

  3. Why CSS? • Keep presentation separate from the content • Leaner, meaner web pages • Ease of maintenance • Easier means of reusing web pages for other purposes (RSS, text-to-speech) • Separate style sheets for media types

  4. The Cascade • The “C” in CSS • Least specific to most specific • Depends on type of origin • User agent (browser defaults) • Author (web page creator) • User (user styles in browser)

  5. User Agent • http://whatsmyuseragent.com/ • Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16 • Built-in style sheet in all web browsers • Varies from Firefox to IE6 to IE7 to Opera, etc.

  6. Author Styles • Created by the web site/page author • Can be (least specific to most specific): • Linked (external) • Style element (embedded) • Element attribute (in-line)

  7. WebPAC Style Sheets • ProStyles.css -or- iiiStyles.css (default values; cannot be modified) • styles.css (main author style sheet) • ie_styles.css (specifically for IE browsers) • printVer.css (specifically for print version)

  8. The Document Tree • Helpful in determining containing elements • Establishes: • Ancestor • Descendent • Parent • Child • Sibling • Determines inheritance of CSS rules

  9. http://www.guistuff.com/css/css_doctree.html

  10. Relationships http://www.guistuff.com/css/css_doctree.html

  11. Class vs. ID • ID • Can be used only once on a page • Identifies a specific section • Example: toplogo, content, side navigation, footer • Use in style sheet: div#nav • Use in HTML: <div id=“nav”>

  12. ID in styles.css • Selector specified div#main {margin: 0 20px 5px 5%;} • Implied universal selector #main div {padding-top:.2em} • Can be combined with class #main .tabs a:hover { text-decoration: underline; }

  13. Class vs. ID • Class • Can be used multiple times • Styles a type of content • Example: boldface, paragraph alignment, font • Use in style sheet: p.bold • Use in HTML: <p class=“bold”>

  14. Class in styles.css • Implied universal selector used extensively .navigationRow { margin: -3px; } • Could be used as a div or p or ul • div class=“navigationRow” • p class=“navigationRow” • ul class=“navigationRow”

  15. Pseudo-classes • Most common • :link • :visited • :hover • :active • Always use in this order: L V H A(LoVe – HA!)

  16. Pseudo-classes • Less often used • :focus input:focus { background-color: Red; } BEFORE AFTER

  17. Fun with Pseudo-classes • :first-child table.bibItems tr.bibItemsEntry td:first-child { font-weight: bold ; color: Green ; font-size: 200% ; background-color: red ; }

  18. How We Got There From briefcit.html: table.bibItems tr.bibItemsEntry td:first-child

  19. Specificity • Represented by four comma-separated values • Calculated based on counting elements in the selector • The highest value wins • In case of a tie, the last declaration wins

  20. Figuring the Specificity • In-line style • Ids • Classes, Attributes, and Pseudo-classes • Element Types and Pseudo-elements

  21. Consider This Example <style type=“text/css”> p { color: black; background-color: blue; font-size: 3em; } div.warning p { color: red; } div#caution p { color: yellow; } body#home div p { color: white; } </style> <body id="home"> <div id="caution"> <p>What color am I?</p> </div> </body> What color will the paragraph text be?

  22. Add Up the Scores p { color: black; background-color: blue; font-size: 3em; } 0,0,0,1 div.warning p { color: red; } 0,0,1,2 div#caution p { color: yellow; } 0,1,0,2 body#home div p { color: white; }0,1,0,3 <body id="home"> <div id="caution"> <p>What color am I?</p> </div> </body>

  23. And the Winner Is…

  24. Inheritance of Style • In the absence of a specific declaration for the element • Value of element will inherit its characteristics from its parent

  25. Specificity High to Low

  26. Why Is My Text So Small? • Container size has nothing to do with it • Size property is inherited from parent • Nesting the elements will cause cumulative size • Relative font size the culprit

  27. Container Elements • Box elements that can contain other elements • Examples of box elements: • body • div • p • h1 • ul

  28. Example div.a { font-size: 85% ; } div.b { font-size: 85% ; } div.c { font-size: 85% ; } <div class=“a”> text in div.a <div class=“b”> text in div.b <div class=“c”> text in div.c </div> </div> </div>

  29. Hard to tell from herewhy text gets smaller

  30. But add in borders and widths and it becomes apparent

  31. Mathematically Speaking… • div.a - 85% of body default font size 85% x 100% = 85% • div.b - 85% of div.a font size 85% x 85% = 72.25% • div.c - 85% of div.b font size 85% x 72.25% = 61.41%

  32. Options that Work div.a { font-size: 18pt ; width: 85% ; border: 2px solid red ;} div.b { font-size: 18pt ; width: 85% ; border: 2px dashed blue ;} div.c { font-size: 18pt ; width: 85% ; border: 2px dotted green ; } ================== div.a { font-size: 85% ; width: 85% ; border: 2px solid red ;} div.b { font-size: 1em ; width: 85% ; border: 2px dashed blue ;} div.c { font-size: 1em ; width: 85% ; border: 2px dotted green ; }

  33. Check Your Work • HTML Validatorhttp://validator.w3.org/ • CSS Validatorhttp://jigsaw.w3.org/css-validator/

  34. Check in Various Browsers http://browsershots.org/

  35. CSS Editor • TopStyle Lite or Prohttp://www.bradsoft.com/topstyle/tslite/ • Lite is free • Pro is $79.95 – and WORTH it

  36. Develop Your Skills • Take an Online Coursehttp://eclasses.org/ • Discounts available to International Webmasters Association members($49 annually) http://www.iwanet.org/ • http://www.w3schools.com/css/(free)

  37. For More Information • General CSS:Olsson, Tommy & Paul O’Brien. The Ultimate CSS Reference. Sitepoint, 2008.http://reference.sitepoint.com/css • Specificity:O’Brien, Paul. “Get Specific with Your CSS Styles.”www.sitepoint.com/article/get-specific-css-styles/

  38. CSS “Cookbooks” • Andrew, Rachel. The CSS Anthology: 101 Essential Tips, Tricks & Hacks. Sitepoint, 2007. • Schmitt, Christopher. CSS Cookbook. O’Reilly, 2007.

More Related