Scribd Logo
Upload

Welcome to Scribd!

  • Advanced Cascading Style Sheet: By: Eduardo S. Rodrigo

    Uploaded by

    Marlou Dequito
    6 views13 pages
    The document discusses advanced CSS topics including: 1) The differences between ID and class selectors for styling HTML elements. 2) The uses of common elements like <div> for sections and <span> for inline text portions. 3) CSS positioning properties like relative and absolute and how they affect layout. 4) The CSS box model including padding, margins, and using values to control spacing.

    Original Description:

    Original Title

    Advanced 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
    The document discusses advanced CSS topics including: 1) The differences between ID and class selectors for styling HTML elements. 2) The uses of common elements like <div> for sections and <span> for inline text portions. 3) CSS positioning properties like relative and absolute and how they affect layout. 4) The CSS box model including padding, margins, and using values to control spacing.

    Copyright:

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

    Advanced Cascading Style Sheet: By: Eduardo S. Rodrigo

    Uploaded by

    Marlou Dequito
    The document discusses advanced CSS topics including: 1) The differences between ID and class selectors for styling HTML elements. 2) The uses of common elements like <div> for sections and <span> for inline text portions. 3) CSS positioning properties like relative and absolute and how they affect layout. 4) The CSS box model including padding, margins, and using values to control spacing.

    Copyright:

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

    Advanced Cascading Style Sheet

    By: Eduardo S. Rodrigo


    Intended Learning Outcomes (ILO)
    INTENDED LEARNING OUTCOMES

    At the end of the lesson, the students are expected to :

    1) describe some HTML elements and CSS keywords;

    2) differentiate CSS positioning;

    3) create simple webpages using HTML and Advanced CSS Syntax.


    Difference Between ID and Class Selector
    HTML <div> 

    The <div> tag defines a division or a section in an HTML document.


    HTML <div> 

    <div class="city1">
    <h2>London</h2>
    <p>London is the capital of England.</p>
    </div>

    <div class="city2">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    </div>

    <div class="city3">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    </div>
    HTML <span> 

    • <span> is an inline container used to mark up a part of a text, or a part of a


    document.

    •  <span> is used to color a part of a text.

    <body>

    <h1>The span element</h1>


    <p>My mother has <span style="color:blue;font-weight:bold">blue</span>
    eyes and my father has
    <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>

    </body>
    Differences Between <div> and <span>
    HTML <fieldset><legend> 
    <body>
    <form >
    <fieldset>
    <legend>Personal Information:</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Submit">
    </fieldset>
    </form>
    Position : Relative and Absolute

    • The position relative is the normal position of an element.

    • The position absolute is the position anywhere depending on


    the set location without affecting other elements.

    position: absolute;
    top: 20px;
    left: 100px;
    width: 600px;
    height: 650px;
    CSS Box Model

    Top, bottom, left , right


    The Padding Property
    If the padding property has four values:
    •padding:10px 0px 15px 0px;
    • top padding is 10px
    • right padding is 5px
    • bottom padding is 15px
    • left padding is 20px

    If the padding property has three values:


    •padding:10px 0px 15px;
    • top padding is 10px
    • right and left padding are 5px
    • bottom padding is 15px

    If the padding property has two values:


    •padding:10px 5px;
    • top and bottom padding are 10px
    • right and left padding are 5px

    If the padding property has one value:


    •padding:10px;
    • all four paddings are 10px

    You might also like