Scribd Logo
Upload

Welcome to Scribd!

  • 132 views

    CSS: Separating Design and Content: Kevin Campbell

    Uploaded by

    raj4raj
    CSS (Cascading Style Sheets) was created in 1994 to separate web page design from HTML structure and content. CSS allows users to control visual presentation through style sheets rather than HTML tags. This separation of design and content provides advantages like faster downloads, easier maintenance, global design control, and cost savings through reduced bandwidth usage and higher search engine rankings. CSS can be applied through inline styles, embedded style sheets, or external style sheets linked via HTML. Resources for learning more about CSS include csszengarden.com, w3.org/Style/CSS, and webmonkey.wired.com.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd

    CSS: Separating Design and Content: Kevin Campbell

    Uploaded by

    raj4raj
    132 views17 pages
    CSS (Cascading Style Sheets) was created in 1994 to separate web page design from HTML structure and content. CSS allows users to control visual presentation through style sheets rather than HTML tags. This separation of design and content provides advantages like faster downloads, easier maintenance, global design control, and cost savings through reduced bandwidth usage and higher search engine rankings. CSS can be applied through inline styles, embedded style sheets, or external style sheets linked via HTML. Resources for learning more about CSS include csszengarden.com, w3.org/Style/CSS, and webmonkey.wired.com.

    Original Title

    CSS

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    CSS (Cascading Style Sheets) was created in 1994 to separate web page design from HTML structure and content. CSS allows users to control visual presentation through style sheets rather than HTML tags. This separation of design and content provides advantages like faster downloads, easier maintenance, global design control, and cost savings through reduced bandwidth usage and higher search engine rankings. CSS can be applied through inline styles, embedded style sheets, or external style sheets linked via HTML. Resources for learning more about CSS include csszengarden.com, w3.org/Style/CSS, and webmonkey.wired.com.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Download as ppt, pdf, or txt
    132 views17 pages

    CSS: Separating Design and Content: Kevin Campbell

    Uploaded by

    raj4raj
    CSS (Cascading Style Sheets) was created in 1994 to separate web page design from HTML structure and content. CSS allows users to control visual presentation through style sheets rather than HTML tags. This separation of design and content provides advantages like faster downloads, easier maintenance, global design control, and cost savings through reduced bandwidth usage and higher search engine rankings. CSS can be applied through inline styles, embedded style sheets, or external style sheets linked via HTML. Resources for learning more about CSS include csszengarden.com, w3.org/Style/CSS, and webmonkey.wired.com.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Download as ppt, pdf, or txt
    You are on page 1of 17

    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?
     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:
    Embedded style sheets:
    External style sheets:
    <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 elements
    P {font-size: usinggray;}
    10pt; color: the STYLE attribute
    </HEAD>
    </STYLE>
    </HEAD>
    This is true “separation” of style and content.
    …
    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
    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/webmonk
     Where I learned CSS and Web Design
    Come and see me at 3:30pm!
     “Making Your Web Site More
    Appealing”

    You might also like