1 / 20

Kick It Up a Notch: Enhance your web page with Cascading Style Sheets

Kick It Up a Notch: Enhance your web page with Cascading Style Sheets. Kathy Fletcher Manager, Training & Publications Support Services Office of Information Technology West Virginia University. Why use Style Sheets?. separate structure from appearance create consistent appearance

hazel
Download Presentation

Kick It Up a Notch: Enhance your web page with Cascading Style Sheets

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. Kick It Up a Notch:Enhance your web page withCascading Style Sheets Kathy FletcherManager, Training & Publications Support ServicesOffice of Information TechnologyWest Virginia University

  2. Why use Style Sheets? • separate structure from appearance • create consistent appearance • ease of maintenance • increase accessibility • apply additional effects • reduce use of non-standard tags • reduce web page file size

  3. Apply Additional Effects • Add hover effect to links • Remove underlines on links • Add horizontal rule to headings • Use instead of a table for a border • Control paragraph, line, letter spacing • Use instead of tables for layout

  4. Replace Non-standard Tags Some tags and attributes have been deprecated in HTML 4.0 Strict <font face=arial color=red size=+2><basefont …> <center> <h1 align=center> <td valign=top height=45 > <ul type=square>

  5. Where do you put styles? • In-line - add to HTML tag<H1 style="color: maroon"> • Embedded style sheets<style> </style> • External style sheets<link href="style.css">

  6. In-line <H1 style="color: maroon"> • Similar to adding attributes to html tags • Disadvantages • decreased accessibility • increased file size • harder to update

  7. Embedded style sheets <style> <!--h1 {font-family: arial, sans-serif;} --> </style> • Put rules between style tags • Put in head section • Add html comment tags • Use when single document has unique style

  8. External style sheets <link rel="stylesheet"type="text/css" href="style.css"> • Save rules in external file • Advantages • ease of maintenance • use less disk space • increase accessibility

  9. Three types of style sheets • Author: designed to fit the site you are currently visiting • User: your own style sheet, created to fulfill your own needs • User agent: default style sheets inside the browser you're using The style sheet rule with greatest weight will take precedence

  10. Cascade Order: which style sheet rule wins? • author > user > browser • !important: user > author > browser • more specific > more general • order specified: later > earlier rules

  11. Structure of a Rule • name_of_tag { property: value(s) ; …}H1 { font-family: Times, serif; } • Multiple properties on one rule:H1 {color: black; font-weight: bold;} • Group tags:H1, H2, H3 { font-family: Times, serif; } • Contextual selector:H1 EM {color: maroon; font-weight: bold; font-style: italic; }

  12. Class selector & attribute To create rules that can be applied to a variety of html tags <style>.bar {color: maroon; font-size: smaller; background-color: yellow;}</style> … <p class="bar">text</p>… <p><a href="url.htm" class="bar">link</a> </p>

  13. Apply Additional Effects • Add hover effect to links • Remove underlines on links • Add horizontal rule to headings • Control paragraph, line, letter spacing • Use instead of a table for a border • Use instead of tables for layout www.wvu.edu/~support/training/classmat/css/index_new.html

  14. !Important • User can mark items in their style own sheets as important • !important rules over-ride author’s settings p {font-size: 18pt !important}

  15. Browser Support • Older (before CSS): NN3, Lynx • Limited: WebTV, EmacSpeak • Broken: IE3, IE4, NN4 • Compliant: • Mozilla and Netscape 6 • Opera 5 and 6 • recent versions of Internet Explorer

  16. CSS and Accessibility • Use good HTML: <h1> instead of <div style="font-size: big; font-weight: bold;"> • Make sure page is readable without any style sheet enabled www.icdri.org/Kynn/chapter21.html CSS Techniques for WCAG 1.0www.w3.org/TR/WCAG10-CSS-TECHS/

  17. Validation • Validate your HTMLvalidator.w3.org • Validate your CSSjigsaw.w3.org/css-validator/ • Check for web accessibilitybobby.watchfire.com

  18. Additional Testing • Different browsers: • Internet Explorer 5 • Mozilla or Netscape 6 • Netscape 4 • Different platforms: PC / Mac • Different browser window sizes • Different resolutions

  19. Create alternate style sheets for different media • screen • print • aural – EmacSpeak (unix) • handheld • tv, tty, braille, embossed, projected www.wvu.edu/~support/training/classmat/css/etdlist3.html

  20. References • 1. Cascading Style Sheets: The Definitive Guide2. Eric Meyer on CSSwww.meyerweb.com/eric/books/ • Teach Yourself CSS in 24 Hours, Kynn Bartlettwww.cssin24hours.com/ • W3C: www.w3.org/pub/WWW/Style/Welcome.html • WaSP: www.webstandards.org/learn/standards/css/ • CSS FAQ:developer.irt.org/script/css.htm • www.richinstyle.com • www.wvu.edu/~support/training/classmat/css/

More Related