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
 ease of maintenance
 increase accessibility
 apply additional effects
 reduce use of non-standard tags
 reduce web page file size
 Ensure Consistent Appearance &
Ease of Maintenance

 Create one style sheet

 Use link tag to use
for several web pages
 Make changes in one file
 Increase Accessibility

 User can override your style sheet

 You can create different style
sheets for alternative devices
 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
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>
 Reduce Web Page File Size

 Every keystroke counts!

 Smaller files load more quickly
 Save disk space
 Example webreg.html
 Original: 27.2K
 Embedded Style Sheet: 26.2K
 External Style Sheet: 25.6K
 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">
 In-line
<H1 style="color: maroon">
 Similar to adding attributes to
html tags
 Disadvantages
 decreased accessibility
 increased file size

 harder to update
 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
 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
 Imported
external style sheets
@import "faq.css";
@import url(myway.css);
You may specify media-dependent
@import rules:
@import url(readable.css) print;
@import url(listening.css) aural;
 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
 Cascade Order:
which style sheet rule wins?
 author > user > browser
 !important: user > author > browser
 more specific > more general
 order specified: later > earlier rules
 Hierarchy of HTML tags

<DIV>
<H1> … </H1>
<P>
<STRONG> … </STRONG>
<EM> … </EM>
<A …> … </A>
</P>
<UL> <LI> … </LI> </UL>
</DIV>
 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; }
 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>
 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
Additional effects

h1 { font-size: 2em; vertical-align: text-bottom;

line-height: 1.25em; margin-right: 5%;
font-family: "Arial Black", Verdana, sans-serif;
letter-spacing: 0.5em;
color: blue; background-color: silver}
h2 { border-style: solid none none none;
border-width: medium; border-color: #808080;
margin-top: 1.5em; margin-bottom: .5em;
font-size: 1.75em; text-transform: capitalize; }
ul { margin-top: .1em; list-style: square}
li { margin-bottom: .25em;}
a { text-decoration: none; }
a:hover { text-decoration: underline;
color: #800000; background-color: #ffcc00;}
 !Important

 User can mark items in their style

own sheets as important
 !important rules over-ride author’s
settings
p {font-size: 18pt !important}
 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
 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.0

www.w3.org/TR/WCAG10-CSS-TECHS/
 Validation

 Validate your HTML

validator.w3.org
 Validate your CSS
jigsaw.w3.org/css-validator/
 Check for web accessibility
bobby.watchfire.com
 Additional Testing
 Different browsers:
 Internet Explorer 5
 Mozilla or Netscape 6
 Netscape 4
 Different platforms: PC / Mac
 Different browser window sizes
 Different resolutions
 What to look for
 Access to information
 Functionality
 Aesthetics
 Create alternate style
sheets for different media
 screen
 print
 aural – EmacSpeak (unix)
 handheld
 tv, tty, braille, embossed, projected
www.wvu.edu/~support/training/classm
<style type="text/css" media="screen" >
<!--
body { font-family: Arial, Geneva, sans-serif;
background-color: white; color: black;}
p { width: 550px; }
h2 { text-align: center; background-color: #FFF8E1;
color: #800000; font-size: 1em; margin-bottom: .18em;}
h3 { font-size: 1em; display: run-in; }
ul { list-style-type: square; width: 520px;}
em { font-weight: bold; background-color: white;
color: maroon; font-style: normal; }
.smalltext { font-size: 40% }
.bar { background-color: #ffcc00; color: #000080;
font-size: x-small; width: auto;}
-->
</style>
<style type="text/css" media="print" >
<!--
body {font-family: Times, serif; color: black;
background-color: white;}
p, li {font-size: 12pt;}
h1 { font-size: 18pt; font-weight: bold;}
h2 { font-size: 14pt; font-weight: bold;}
h3 { font-size: 12pt; font-weight: bold;}
ul { list-style-type: square;
page-break-inside: avoid;}
em {font-style: italic; font-weight: bold; }
.bar {display: none;}
.break {page-break-after: always;}
.smalltext { font-size: 75% }
-->
</style>
<style type="text/css" media="aural" >
<!--
body { voice-family: Paul, male; speak-punctuation: none}
h1 { cue-before: url("ding.wav") }
p { pause-after: 10ms; }
strong { volume: loud; richness: 60Hz ;
pause-before: 20ms; pause-after: 10ms ;}
em { pause-before: 50ms; stress: 60Hz ; }
-->
</style>
<style type="text/css" media="handheld" >
<!--
body {background: white; color: black}
a:link {color: blue}
a:visited {color: #990066}
h1, h3 {color: #888888}
p {margin: 0}
img {max-width: 100%}
h2 {background: #005A9C; color: white; padding: 0.3em;
border-top: 1em solid #F73; margin-top: 0}
div.back {border-top: 0.49em solid #CC0; margin: 1em 0}
div.banner {margin: 0.5em 0; padding: 0.3em;
background: black}
div.banner p {display: inline; font-weight: bold}
div.banner a:before {content: " · "}
-->
</style>
References
 1. Cascading Style Sheets: The Definitive Guide
2. Eric Meyer on CSS
www.meyerweb.com/eric/books/
 Teach Yourself CSS in 24 Hours, Kynn Bartlett
www.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/