Scribd Logo
Upload

Welcome to Scribd!

  • Cascading Style Sheets

    Uploaded by

    Siddique Ahmad
    12 views17 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, 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 PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    12 views17 pages

    Cascading Style Sheets

    Uploaded by

    Siddique Ahmad

    Copyright:

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

    Cascading Style Sheets

    02/15/21 Zahid Aslam


    Cascading Style Sheets
     Are a standard set by the World Wide Web
    Consortium (W3C)
     A simple mechanism for adding style (e.g.
    fonts, colors, spacing) to Web documents
     It is a way to separate the content from the
    layout on web pages.

     Can be used for HTML, XHTML and XML


    documents.
     The term “cascading” refers to the fact that
    each different style declaration can be
    “cascaded” under the one above it, forming a
    parent-child relationship between the styles.
    02/15/21 Zahid Aslam
    Advantages of CSS
     Excellent addition to plain HTML
     Easily change the look
     Can save lot of work
     Offers much more detailed attributes
     Pages load faster

    02/15/21 Zahid Aslam


    Disadvantage
     These will only work on version 4 browsers or
    newer
     CSS1 support is at least partially available for
    more than 96% of the current browser
    population, with a good CSS2 support for
    about 80% of today's browsers.

    02/15/21 Zahid Aslam


    Rules and Style Sheets
     Rule: A rule is a statement about one stylistic
    aspect of one or more elements.
     Style Sheet: A style sheet is a set of one or
    more rules that apply to an HTML document.
    Rules to follow
     Browser default
     External style sheets
     Internal style sheet (inside the head tag)
     Inline style sheets (inside html element)
    (highest priority)
    02/15/21 Zahid Aslam
    Rules and Style Sheets
    General form of a rule:

     selector { property: value }


    or
    selector { property1: value1;
    property2: value2;
    ….
    propertyN: valueN }

    Example:
    H1 { text-align: center;
    color: red }

    02/15/21 Zahid Aslam


    HTML Selector
     <HTML>
    <HEAD>
    <style type="text/css">
    B{
    font-family:arial;
    font-size:14px;
    color:red
    }
    </style>
    </HEAD>
    <BODY>
    <b>This is a customized headline style bold</b>
    </BODY>
    </HTML>

     This is a customized headline style bold color red

    02/15/21 Zahid Aslam


    HTML Selector (grouping)
    <style type="text/css">
    h1,h2,h3,h4,h5,h6{
    font-family:arial;
    color:red
    }
    </style>

    02/15/21 Zahid Aslam


    Class Selector
     you can define different styles for the same type of HTML element.
     .ClassSelector {Property:Value;}

     <HTML>
    <HEAD>
    <style type="text/css">
    .headline {font-family:arial; font-size:14px; color:red}
    </style>
    </HEAD>
    <BODY>
    <b class="headline">This is a bold tag carrying the headline class</b>
    <br>
    <i class="headline">This is an italics tag carrying the headline class</i>
    </BODY>
    </HTML>
    This is a bold tag carrying the headline class
    This is an italics tag carrying the headline class

    02/15/21
    ID Selector
     used when you want to define a style relating to an object with a unique ID.
     There can only be one element with a given id in whole document
    #IDSelector {Property:Value;}
    <HTML>
    <HEAD>
    <style type="text/css">
    #layer1 {position:absolute; left:100;top:100; z-Index:0}
    #layer2 {position:absolute; left:140;top:140; z-Index:1}
    </style>
    </HEAD>
    <BODY>
    <div ID="layer1">
    <table border="1" bgcolor="#FFCC00"><tr><td>THIS IS LAYER
    1<br>POSITIONED AT 100,100</td></tr></table>
    </div>
    <div ID="layer2">
    <table border="1" bgcolor="#00CCFF"><tr><td>THIS IS LAYER
    2<br>POSITIONED AT 140,140</td></tr></table>
    </div>
    </BODY>
    </HTML>
    02/15/21
    ID Selector

    02/15/21
    Where to place selectors
     Internal Style Sheet:
     <html>
    <head>
    <title>MY CSS PAGE</title>
    <style type="text/css">
    .headlines, .sublines, infotext {font-face:arial; color:black; background:yellow; font-
    weight:bold;}
    .headlines {font-size:14pt;}
    .sublines {font-size:12pt;}
    .infotext {font-size: 10pt;}
    </style></head>
    <body>
    <span class="headlines">Welcome</span><br>
    <div class="sublines">
    This is an example page using CSS.<br>
    The example is really simple,<br>
    and doesn't even look good,<br>
    but it shows the technique.
    </div>
    <table border="2"><tr><td class="sublines">
    As you can see:<br>The styles even work on tables.
    </td></tr></table>
    <hr>
    <div class="infotext">
    Example.</div><hr></body></html>
    02/15/21
    Where to place selectors
     External Style Sheet:
     <html><head>
    <title>MY CSS PAGE</title>
    <link rel=stylesheet href="whatever.css" type="text/css"></head>
    <body>
    <span class="headlines">Welcome</span><br>
    <div class="sublines">
    This is an example of a page using CSS.<br>
    The example is really simple,<br>
    and doesn't even look good,<br>
    but it shows the technique.
    </div>
    <table border="2"><tr><td class="sublines">
    As you can see:<br>
    The styles even work on tables.
    </td></tr></table>
    <hr>
    <div class="infotext">Example for class presentation.</div>
    <hr>
    </body>
    </html>
    02/15/21
    External Style Sheets
     we added a reference to an external style sheet:

    <link rel=stylesheet href="whatever.css"


    type="text/css">

     File: whatever.css
    .headlines, .sublines, infotext {font-face:arial;
    color:black; background:yellow; font-weight:bold;}
    .headlines {font-size:14pt;}
    .sublines {font-size:12pt;}
    .infotext {font-size: 10pt;}

    02/15/21
    Visual Tour
     www.wirednews.com
     http://www.csszengarden.com/

    02/15/21
    Conclusion
     Through style sheets you can specify the
    general formatting of HTML elements
     Use external style sheets to share styles across
    all documents in the web site
     Class definitions allow you to define multiple
    styles for an HTML element
     Not all styles supported by all browsers

    02/15/21
    Cascading Style sheets

    Questions?

    02/15/21

    You might also like