New Css style

CSS: Separating Design and
Content

Global Information Internship
Program from BUDNET
www.budnetdesign.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: sheets:
Embedded style sheets:
External style
<H1 STYLE=“color: blue; font-size: 20pt;”>A large purple
<HTML><HEAD><TITLE>Stylin’!</TITLE>
<HEAD>
Heading</H1>
<STYLE TYPE=“text/css”>
<LINK REL=stylesheet” TYPE=“text/css”
H1 {color: purple;}
HREF=“styles/mystyles.css”>
For individual elementscolor: gray;}
P {font-size: 10pt; using the STYLE attribute
</HEAD>
</STYLE>
</HEAD> “separation” of style and content.
This is true
…
Keeping all your styles in an external document is
</HTML>
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/web
monkey/reference/stylesheet_guide
 Where I learned CSS and Web Design

Come and see me at 3:30pm!
 “Making Your Web Site More
Appealing”

New Css style

More Related Content

What's hot

Similar to New Css style

More from BUDNET

Recently uploaded

New Css style