Css

CSS: Separating Design and Content

Assumptions

You know HTML You do not know CSS You care about aesthetics and

function You have 50 minutes to kill

What We’ll Do

What is CSS? View some code and talk basics Why use CSS?

Advantages to Workflow Cost Savings

Implementations Resources

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

Separates design elements from structural logic

You get control and maintain the integrity of your data

Let’s See Some Code

Sample Style sheet Rule Structure

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;}

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;}

Applying CSS to HTML

Style rules can be applied in 3 ways:

Inline Styles:

<H1 STYLE=“color: blue; font-size: 20pt;”>A large purpleHeading</H1>

For individual elements using the STYLE attribute

Embedded style sheets:

<HTML><HEAD><TITLE>Stylin’!</TITLE><STYLE TYPE=“text/css”>

H1 {color: purple;}P {font-size: 10pt; color: gray;}

</STYLE></HEAD>…</HTML>

External style sheets:

<HEAD><LINK REL=stylesheet” TYPE=“text/css” HREF=“styles/mystyles.css”></HEAD>

This is true “separation” of style and content. Keeping all your styles in an external document is simpler

Why CSS?

Advantages to Workflow Cost Savings You WILL Be Cooler

Advantages of CSS

Workflow Faster downloads Streamlined site maintenance Global control of design attributes Precise control (Advanced)

Positioning Fluid layouts

Advantages of CSS - Cost Savings

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


Faster download = better usability Web usability redesign can increase the

sales/conversion rate by 100% (source: Jakob Nielson)

CSS requires less code Tables require spacer images Entire table has to render before content CSS can control the order that elements

download (content before images)


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

Implementations

Apply to HTML pages Apply to dynamic data

Format or style XML Use for layout (this is cool)

See http://www.csszengarden.com

CSS isn’t perfect (yet)

CSS support in browsers is still uneven

Make sure your CSS properties are supported

Resources

http://www.csszengarden.com This is CSS at its finest

http://www.w3.org/Style/CSS/ The Official CSS Site

http://css.maxdesign.com.au/ Australian firm, very professional

http://webmonkey.wired.com/webmonkey/reference/stylesheet_guide Where I learned CSS and Web Design

Come and see me at 3:30pm!

“Making Your Web Site More Appealing”

Technology

Css