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