Scribd Logo
Upload

Welcome to Scribd!

  • 15 views

    Cascading Style Sheets

    Uploaded by

    shreyas
    CSS stands for Cascading Style Sheets and is used to style and lay out HTML documents. CSS allows separation of document content from design, making it easier to change design without altering content. CSS rules are made up of selectors that point to HTML elements along with declarations that specify property-value pairs to style those elements. CSS can be attached to HTML documents via internal, external, and inline stylesheets and uses properties like color, background-color, and font-size along with selectors like element, class, ID and universal to target elements for styling.

    Copyright:

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

    You might also like

    Cascading Style Sheets

    Uploaded by

    shreyas
    15 views19 pages
    CSS stands for Cascading Style Sheets and is used to style and lay out HTML documents. CSS allows separation of document content from design, making it easier to change design without altering content. CSS rules are made up of selectors that point to HTML elements along with declarations that specify property-value pairs to style those elements. CSS can be attached to HTML documents via internal, external, and inline stylesheets and uses properties like color, background-color, and font-size along with selectors like element, class, ID and universal to target elements for styling.

    Original Description:

    CSS

    Original Title

    Css

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    CSS stands for Cascading Style Sheets and is used to style and lay out HTML documents. CSS allows separation of document content from design, making it easier to change design without altering content. CSS rules are made up of selectors that point to HTML elements along with declarations that specify property-value pairs to style those elements. CSS can be attached to HTML documents via internal, external, and inline stylesheets and uses properties like color, background-color, and font-size along with selectors like element, class, ID and universal to target elements for styling.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    15 views19 pages

    Cascading Style Sheets

    Uploaded by

    shreyas
    CSS stands for Cascading Style Sheets and is used to style and lay out HTML documents. CSS allows separation of document content from design, making it easier to change design without altering content. CSS rules are made up of selectors that point to HTML elements along with declarations that specify property-value pairs to style those elements. CSS can be attached to HTML documents via internal, external, and inline stylesheets and uses properties like color, background-color, and font-size along with selectors like element, class, ID and universal to target elements for styling.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    of 19

    CASCADING STYLE SHEETS

    THE PURPOSE OF CSS

    If HTML is the content and meaning


    ➡ CSS helps to convey that meaning
    Allows developers to separate the content from
    layout and design
    Content and design inherently different in nature
    ➡ Change in content does not require change in design
    WHAT IS CSS?

    CSS stands for Cascading Style Sheet.


    Typical CSS file is a text file with an
    extention.css and contains a series of
    commands or rules. These rules tell the
    HTML how to display.

    *To create a style sheet, create a file using Notepad (PC) or Text
    Edit (Mac), save it as a .css document and start writing the CSS
    code (see right).
    CSS BENEFITS

    • Separates structure from presentation


    • Provides advanced control of presentation
    • Easy maintenance of multiple pages
    • Faster page loading
    • Better accessibility for disabled users
    • Easy to learn
     Inline css
     Document Level css

     External css
    ATTACHING A STYLE SHEET

    Attach a style sheet to a page by adding the code to the <head>


    section of the HTML page. There are 3 ways to attach CSS to a
    page:

    1. External Style Sheet: Best used to control styling on multiple


    pages.
    <link rel="stylesheet" type="text/css"
    media="all" href="css/styles.css" />
    2. Internal (DOCUMENT)Style Sheet: Best used to control styling
    on one page.
    <style type=“text/css”>
    h1 {color: red)
    </style>
    3. Inline Style Sheet*: CSS is not attached in the <header> but is
    used directly within HTML tags.
    <p style=“color: red”>Some Text</p>
    STYLE SPECIFICAITON FORMAT
    Inline
     Style = “ property_1:value_1;property_2:value2;”

    Document
     <style type=“text/css”>

    Rule_list
     </style>
    CSS RULE STRUCTURE

    A CSS RULE is made up of a selector


    and a declaration. A declaration consists
    of property and value.

    selector {property: value;}

    declaration
    SELECTORS

    A selector, here in green, is often an element of


    HTML.

    body { property: value; }


    h1 { property: value; }
    em { property: value; }
    p { property: value; }
    PROPERTIES AND VALUES
    body {background: purple;}
    h1 {color: green; }
    h2 {font-size: large;}
    p {color: #ff0000;} /*hexadecimal for
    red*/

    Properties and values tell an HTML element how to display.

    body {
    *CSS code can be written in a
    background: purple; linear format (above) or in a block
    color: green; format (below).

    }
    GROUPING SELECTORS
    Group the same selector with different declarations
    together on one line.

    h1 {color: black;}
    h1 {font-weight: bold;}
    h1 {background: white;}

    Example of grouping selectors (both are correct):

    h1 {
    color: black;
    font-weight: bold;
    background: white;
    }
    GROUPING SELECTORS
    Group different selectors with the same declaration on
    one line.

    h1 {color: yellow;}
    h2 {color: yellow;}
    h3 {color: yellow;}

    Example of grouping selectors (both are correct):

    h1, h2, h3 {color: yellow;}


    COMMENTS IN CSS

    • Explain the purpose of the coding


    • Help others read and understand the code
    • Serve as a reminder to you for what it all means
    • Starts with /*and ends with*/

    p {color: #ff0000;} /*Company Branding*/


    CLASS SELECTOR

     Class selector are used to allow different


    occurrences of the same tag to use different style
    specification.
     P.normal {property-valuelist}

     P.warning {property-value list }

     <p class=“normal”>
    A paragraph text is presentedin ‘normal’ </p>
    <p class=“warning”>
    A paragraph text is presents a warning message.</p>
    GENERIC SELECTOR

    .sale { property-value list }


    <h3 class=“sale”>Weekend sale </h3>
    <p class=“sale”>
    ….
    …………
    </p>
    ID SELECTOR
     #specific-id { property-value list }
     #sec12 {font-size:20}
     <h2 id=“sec12”> dsdkhd </h2>
    UNIVERSAL SELECTOR
     Apllies to all elements.

     * {color:red;}
    COLOR PROPERTIES
     Color
     Background-color
    SPAN & DIV TAG

     The <span> tag is used to group inline-elements


    in a document.
     The <span> tag provides no visual change by
    itself.
     The <span> tag is used for a part of a text or a
    part of a document.

     The <div> tag defines a division or a section in an


    HTML document.
     The <div> tag is used to group block-elements to
    format them with CSS.

    You might also like