CSS: What are

Cascading Style Sheets?

Linda S. Ralston, Ph.D.

Associate Professor/Instructor
PRT 5460/6460 Electronic Marketing
 Learning Objectives

„ What is CSS?
„ Why use CSS?

„ CSS code basics

„ Implementation

„ References

PRT 5460/6460 CSS Introduction

 What are Cascading Style Sheets?

„ Created by Hakon Wium Lie of MIT in

1994
„ Has become the W3C standard for
controlling visual presentation of web
pages

PRT 5460/6460 CSS Introduction

 W3C
„ The World Wide Web Consortium
(W3C) develops interoperable
technologies (specifications, guidelines,
software, and tools) to guide the Web to
its full potential.

PRT 5460/6460 CSS Introduction

 What are Cascading Style Sheets?

„ Separates design elements from structural

logic
„ You get control and maintain the integrity
of your data

PRT 5460/6460 CSS Introduction

 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
PRT 5460/6460 CSS Introduction
 Advantages of CSS - Workflow
„ Faster downloads
„ Streamlined site maintenance

„ Global control of design attributes

„ Precise control (Advanced)

„ Positioning
„ Fluid layouts

PRT 5460/6460 CSS Introduction

 Advantages of CSS - Cost Savings
„ Reduced Bandwidth Costs
„ One style sheet called and cached

„ Higher Search Engine Rankings

„ Cleaner code is easier for search engines

to index
„ Greater density of “indexable” content

PRT 5460/6460 CSS Introduction

 Advantages of CSS - Cost Savings

„ Faster download = better usability

„ Web usability redesign can increase the
sales/conversion rate by 100% (source:
Jakob Nielson)
„ CSS requires less code

PRT 5460/6460 CSS Introduction

 Advantages of CSS - Cost Savings

„ Faster download = better usability

„ Tables require spacer images
„ Entire table has to render before content

„ CSS can control the order that elements

download (content before images)

PRT 5460/6460 CSS Introduction

Advantages of CSS – Increased Reach
„ CSS website is compatible w/ many
different devices
„ In 2008 an est. 58 Million PDA’s will be

sold (Source: eTForecast.com)

„ 1/3 of the world’s population will own a

wireless device by 2010

PRT 5460/6460 CSS Introduction

 Ensure Consistent Appearance &
Ease of Maintenance

„ Create one external style sheet

„ Use link tag to use as the style guide for
several web pages
„ Make changes in one external CSS file

PRT 5460/6460 CSS Introduction

 Increase Accessibility
„ User can override your style sheet
„ You can create different style sheets for
alternative devices or alternative user
groups

PRT 5460/6460 CSS Introduction

 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

PRT 5460/6460 CSS Introduction

 Replace Non-standard Tags
„ Some tags and attributes have been deprecated
in HTML 4.0
„ Use CSS to remove invalid markup from your

sites, separate style from content, lighten the

bandwidth of your pages, and increase the odds
that people and devices will actually be able to
access the sites you create.

PRT 5460/6460 CSS Introduction

 What? No more HTML?
„ The W3C invented Cascading Style Sheets
(CSS) in 1996 to increase the presentational
sophistication and the accessibility of
websites, and to eliminate the browser-specific
markup that threatened to fragment the
emerging web. In 1997, some browsers began
to support parts of CSS-1, but the standard did
not become truly usable until browsers have
adopted the standards.
PRT 5460/6460 CSS Introduction
 Replace Non-standard Tags

<font face=arial color=red size=+2>

<basefont …>
<center>
<h1 align=center>
<td valign=top height=45 >
<ul type=square>

PRT 5460/6460 CSS Introduction

 Reduce Web Page File Size

„ Every keystroke counts!

„ Smaller files load more quickly

„ Save disk space

PRT 5460/6460 CSS Introduction

 Understanding Style Rules

„ The style characteristics for an HTML

element are expressed by Style Rules
„ A set of style rules is called a Style Sheet.

„ Style rules are contained in the <STYLE>

element in the document’s <HEAD>
section.

PRT 5460/6460 CSS Introduction

 Sample of CSS Code

PRT 5460/6460 CSS Introduction

 Selectors
„ Element Selectors – (refer to HTML
tags)
H1 {color: purple;}
H1, H2, P {color: purple;}
„ Contextual – (refer to HTML, but in
context)
LI B {color: purple;}

PRT 5460/6460 CSS Introduction

 Selectors
„ Class Selectors
<H1 CLASS=“warning”>Danger!</H1>
<P CLASS=“warning”>Be careful…</P>
…….
In your HTML code -
H1.warning {color: red;}
OR to an entire class…
.warning {color:red;}
PRT 5460/6460 CSS Introduction
 Where do you put styles?

„ In-line - add to HTML tag

<H1 style="color: maroon">
„ Embedded/Internal style sheets
<style> </style>
„ External style sheets
<link href="style.css">

PRT 5460/6460 CSS Introduction

 In-line Styles
<H1 style="color: maroon">
„ Similar to adding attributes to html tags
„ Disadvantages
„ decreased accessibility
„ increased file size

„ harder to update

PRT 5460/6460 CSS Introduction

 Embedded/Internal 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
PRT 5460/6460 CSS Introduction
 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

PRT 5460/6460 CSS Introduction

 Understanding Style Rules
„ A Style Rule is composed of two
parts: a selector and a declaration.

Selector Declaration

TH {color: red;}.

PRT 5460/6460 CSS Introduction

 Understanding Style Rules
„ The Selector indicates the element to
which the rule is applied.
„ The Declaration determines the
property values of a selector.

PRT 5460/6460 CSS Introduction

 Understanding Style Rules

„ The Property specifies a characteristic,

such as color, font-family, position, and
is followed by a colon (:).

PRT 5460/6460 CSS Introduction

 Understanding Style Rules
„ The Value expresses specification of a
property, such as red for color, arial for
font family, 12 pt for font-size, and is
followed by a semicolon (;).
Property
Value

P {color: red;}
PRT 5460/6460 CSS Introduction
 Using the <STYLE> Element
„ The <STYLE> element is always
positioned in the <HEAD> section of the
document.
„ The <STYLE> element always contains
<TYPE> attribute. The value “text/css”
defines the style language as Cascading
Style Sheets.

PRT 5460/6460 CSS Introduction

 Using the <STYLE> Element
„ For example. . .

<Head>
<Style type=“text/css”>
P {color:blue; font-size: 24pt;}
</Style>
</Head>

PRT 5460/6460 CSS Introduction

 CSS isn’t Perfect (yet!)

„ CSS support in browsers is still uneven

„ Make sure your CSS properties are
supported

PRT 5460/6460 CSS Introduction

 Browser Support
„ Older (before CSS): NN3, Lynx
„ Limited: WebTV, EmacSpeak

„ Broken: IE3, IE4, NN4

„ Compliant:

„ Mozilla Firefox and Netscape 6

„ Opera 5 and 6

„ Recent versions of Internet Explorer

PRT 5460/6460 CSS Introduction

 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

CSS Techniques for WCAG 1.0

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

PRT 5460/6460 CSS Introduction

 Validation
„ Validate your HTML
validator.w3.org
„ Validate your CSS
jigsaw.w3.org/css-validator/
„ Check for web accessibility
bobby.watchfire.com

PRT 5460/6460 CSS Introduction

 Additional Testing
„ Different browsers:
„ Internet Explorer 5
„ Mozilla Firefox
„ Netscape 6
„ Different platforms: PC / Mac
„ Different browser window sizes
„ Different resolutions
PRT 5460/6460 CSS Introduction
 References

„ http://www.csszengarden.com
„ This is CSS at its finest
„ http://www.w3.org/Style/CSS/
„ The Official CSS Site

PRT 5460/6460 CSS Introduction

 References
„ http://css.maxdesign.com.au/
„ Australian firm, very professional
„ http://webmonkey.wired.com/webmonke
y/reference/stylesheet_guide

PRT 5460/6460 CSS Introduction

 References
„ W3C:
www.w3.org/pub/WWW/Style/Welcome.
html
„ WaSP:
www.webstandards.org/learn/standards/c
ss/
„ CSS FAQ: developer.irt.org/script/css.htm

PRT 5460/6460 CSS Introduction

 References
„ Cascading Style Sheets: The Definitive
Guide
„ Eric Meyer on CSS
www.meyerweb.com/eric/books/
„ Teach Yourself CSS in 24 Hours, Kynn
Bartlett
www.cssin24hours.com/
PRT 5460/6460 CSS Introduction