• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Css
 

Css

on

  • 1,241 views

 

Statistics

Views

Total Views
1,241
Views on SlideShare
1,200
Embed Views
41

Actions

Likes
1
Downloads
67
Comments
0

2 Embeds 41

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

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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”