Upcoming SlideShare
Loading in...5







Total Views
Views on SlideShare
Embed Views



2 Embeds 42

http://localhost 39
http://www.techgig.com 3



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Css Css Presentation Transcript

  • 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 purple Heading</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”