Scribd Logo
Upload

Welcome to Scribd!

  • Introcss PPT 01 02 PDF

    Uploaded by

    varsha
    29 views14 pages

    Original Title

    introcss.ppt.01.02.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
    29 views14 pages

    Introcss PPT 01 02 PDF

    Uploaded by

    varsha

    Copyright:

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

    INTRODUCTION

    01.02 CSS3: Cascading Style Sheets TO CSS

    CSS3!
    Cascading Style Sheets!

    Adding Style to your Pages!


    INTRODUCTION
    01.02 CSS3: Cascading Style Sheets TO CSS

    Browser Default Styling!

    •  The same html file may look different when


    viewed on different browsers. !
    •  Some tags are supported, some aren’t!
    •  Browsers may have different default styles!

    •  In general, default looks are plain.!


    INTRODUCTION
    01.02 CSS3: Cascading Style Sheets TO CSS

    Adding Style!
    •  As styling tags were phased out of html, styling
    was done with style attribute !

    •  Violated separation of content/style!


    INTRODUCTION
    01.02 CSS3: Cascading Style Sheets TO CSS

    Cascading Style Sheet!


    •  CSS defined generic rules that can apply to
    multiple elements!
    selector {
    property: value;
    }
    INTRODUCTION
    01.02 CSS3: Cascading Style Sheets TO CSS

    Rule Syntax!

    •  Brackets and semicolons are very


    important!
    •  This is where a good editor can make a
    BIG difference!
    !
    INTRODUCTION
    01.02 CSS3: Cascading Style Sheets TO CSS

    Multiple Properties!
    INTRODUCTION
    01.02 CSS3: Cascading Style Sheets TO CSS

    Internal Style Sheet!


    •  Styling is defined within
    <head>!
    •  Rules are defined within
    <style>!
    •  Styles are applied to all
    elements in that file!
    •  Don’t forget to
    close the style tag!!!
    INTRODUCTION
    01.02 CSS3: Cascading Style Sheets TO CSS

    External Style Sheet!


    •  You can put rules in an external file (don’t use the
    style tag!!)!
    •  A link to the style sheet is put in the head section.!
    The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again.

    !
    •  Styles are applied to all elements in all files that links
    to the style sheet!
    INTRODUCTION
    01.02 CSS3: Cascading Style Sheets TO CSS

    The “Cascading” part of CSS!

    •  Browser default !
    •  External style sheets!
    •  Internal style (in the head section)!
    •  Inline style (inside an HTML element)!
    INTRODUCTION
    01.02 CSS3: Cascading Style Sheets TO CSS

    Rule precedence!
    •  What if one selector is defined in two external files?!
    •  The rules from the most recent file have precedence!
    •  What if one selector has more than one rule in the same
    The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you

    file?!
    may have to delete the image and then insert it again.

    !
    •  The most recent rule has precedence!
    INTRODUCTION
    01.02 CSS3: Cascading Style Sheets TO CSS

    !important!
    •  It is possible to override later rules, use !
    !important!
    The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again.
    INTRODUCTION
    01.02 CSS3: Cascading Style Sheets TO CSS

    Example!
    INTRODUCTION
    01.02 CSS3: Cascading Style Sheets TO CSS

    Review!
    •  Why do we want/need to separate content
    from formatting?!
    •  How does this also tie in to external/
    internal style sheets?!
    •  Understand that this is very powerful. See
    http://www.csszengarden.com/!
    INTRODUCTION
    01.02 CSS3: Cascading Style Sheets TO CSS

    Acknowledgements/Contributions!
    These slides are Copyright 2015- Colleen van Lent as part of http://
    www.intro-webdesign.com/ and made available under a Creative
    Commons Attribution Non-Commercial 4.0 License. Please maintain
    this last slide in all copies of the document to comply with the
    attribution requirements of the license. If you make a change, feel free
    to add your name and organization to the list of contributors on this
    page as you republish the materials.!
    !
    Initial Development: Colleen van Lent , University of Michigan School of
    Information! The image cannot be displayed. Your computer
    may not have enough memory to open the image,
    or the image may have been corrupted. Restart
    your computer, and then open the file again. If the
    red x still appears, you may have to delete the

    !
    image and then insert it again.

    You might also like