Scribd Logo
Upload

Welcome to Scribd!

  • Cascading Style Sheets

    Uploaded by

    Siddique Ahmad
    9 views15 pages

    Original Title

    CSS3

    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
    Download as ppt, pdf, or txt
    9 views15 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
    Download as ppt, pdf, or txt
    of 15

    Cascading Style Sheets

    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.
    Advantages of CSS
     Excellent addition to plain HTML
     Easily change the look
     Offers much more detailed attributes
     Pages load faster
    Disadvantage
     These will only work on version 4 browsers or
    newer
    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 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 }
    HTML Selector
     <HTML>
    <HEAD>
    <style type="text/css">
    B {font-family:arial; font-size:28px; color:red}
    </style>
    </HEAD>
    <BODY>
    <b>This is a customized headline style bold</b>
    </BODY>
    </HTML>

     This is a customized headline style bold


    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
    ID Selector
     used when you want to define a style relating to an object with a unique ID.
    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>
    ID Selector
    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>
    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">
    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>
    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>
    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;}
    CSS issues
     CSS and Netscape 4.xx Issues
     <link rel="stylesheet" href="Style.css"
    type="text/css">

     <link rel="stylesheet" href="StyleNN.css"


    type="text/css"> <style type="text/css">
    @import url(Style.css); </style>
    Cascading Style sheets

    Questions?

    You might also like