css: separating design and content
DESCRIPTION
CSS: Separating Design and Content. Kevin Campbell Duke University/Grouchyboy.com. 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? - PowerPoint PPT PresentationTRANSCRIPT
CSS: Separating Design and Content
Kevin CampbellDuke University/Grouchyboy.com
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
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 Tables require spacer images Entire table has to render before content CSS can control the order that elements
download (content before images)
Advantages of CSS - Cost Savings
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”