Scribd Logo
Upload

Welcome to Scribd!

  • CSS PDF

    Uploaded by

    raghuraman36
    14 views46 pages

    Original Title

    CSS.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    14 views46 pages

    CSS PDF

    Uploaded by

    raghuraman36

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 46

    CSS Introduction

    Colin Gourlay & Kevin Vanderbeken


    CSS
    =
    (the presentation layer)
    Today:

    What is CSS?
    Where can CSS be used?
    CSS Syntax - selectors, properties & values
    Selecting HTML elements
    Inheritance & the cascade
    what is CSS?
    CSS = Cascaded Style Sheets

    • A way to customise the presentation of your HTML.


    • A language designed to allow us select and style
    the elements on our page.
    • Like HTML, it has gone through various changes.
    • Also like HTML, it is not a programming language.
    • It can allow us to present our content in multiple
    formats for multiple devices.
    why do we use CSS?
    better type & layout controls
    less work
    smaller documents
    and faster downloads
    better type & layout controls
    less work
    smaller documents
    and faster downloads
    more accessible sites
    better type & layout controls
    less work
    smaller documents
    and faster downloads
    more accessible sites
    reliable browser support
    less work
    smaller documents
    and faster downloads
    more accessible sites
    reliable browser support
    smaller documents
    and faster downloads
    more accessible sites
    reliable browser support
    a great example...

    http://www.csszengarden.com
    where can you use CSS?
    inline styles

    embedded style sheets

    external style sheets


    <html>
    <head>
    <title>Document Title</title>
    </head>
    <body>
    <h1 style="color: red;">
    Introduction
    </h1>
    </body>
    </html>
    inline styles

    embedded style sheets

    external style sheets


    <html>
    <head>
    <title>Document Title</title>
    <style type="text/css">
    h1 { color: red; }
    </style>
    </head>
    <body>
    <h1>Introduction</h1>
    </body>
    </html>
    inline styles

    embedded style sheets

    external style sheets


    <html>
    <head>
    <title>Document Title</title>
    <link rel="stylesheet"
    href="stylesheet.css"
    type="text/css" />
    </head>
    <body>
    <h1>Introduction</h1>
    </body>
    stylesheet.css
    </html>
    h1 {
    color: red;
    }
    CSS syntax
    selectors, properties & values
    selector { property: value; }

    selector {
    property1: value1;
    property2: value2;
    property3: value3;
    }
    h1 { color: orange; }

    p {
    color: #000000;
    font-size: 12px;
    font-family: Arial;
    }
    h1 {}

    <h1>Introduction</h1>
    #article {}

    <p id="article">...text...</p>
    .tab {}

    <li class="tab">...text...</li>
    inheritance & the cascade
    (a.k.a. the BIG concepts)
    inheritance
    HTML
    <p class="bold">
    <a href="http://www.google.com">
    Google
    </a>
    is an excellent search engine.
    </p>

    CSS

    p.bold {
    font-weight: bold;
    }
    document structure
    all elements contained within another
    element are its descendants

    title, style and head are descendants of html


    a direct descendant is called a child element

    body is a child of html


    a containing element is called the parent element

    html is the parent of body


    the trail of parents leading back to the
    root are an element’s ancestors

    p, body and html are ancestors of img


    all elements with the same parent are siblings

    h1, p, p, h2, etc are siblings


    If we wanted all text elements to be shown in
    verdana font, we apply one rule to the <body>

    body { font-face: Verdana; },


    Then all the decendant text elements inside the body
    tag get that style applied.
    the cascade
    the closer the style sheet is
    to the content, the more
    weight it is given
    rules can still conflict...

    ...but the cascade still applies


    HTML
    <li class="myHappyShoes">
    One of many happy shoes
    </li>
    <li id="happyShoe" class="myHappyShoes">
    A <a href="http://shoe.com/">happy shoe</a>
    </li>
    <p class="myHappyShoes">Happy shoes paragraph</p>

    CSS
    .myHappyShoes { color: yellow; }
    .myHappyShoes { color: green; }
    li.myHappyShoes { color: orange; }
    #happyShoe { color: red; }
    li#happyShoe { color: violet; }
    li#happyShoe a { color: blue; }
    about CSS & web standards

    http://www.w3.org/Style/CSS
    how’s our speed?
    email us...

    kevin.vanderbeken@apn.com.au
    colin.gourlay@apn.com.au
    next week...
    file:///C:/Users/C
    olin.Gourlay/Down
    loads/BackToTheF
    utureLogo.jpg

    You might also like