Scribd Logo
Upload

Welcome to Scribd!

  • Intro Integrative Midterm CSS ID Class

    Uploaded by

    Bryan Kenneth Tabares
    21 views23 pages
    The document discusses HTML elements like <div>, <span>, and their attributes like class and id. It explains that <div> is used as a container and has no required attributes, while <span> is also a container but for text. The class attribute defines equal styles for elements with the same class name. The id attribute specifies a unique identifier for an element. CSS can style elements with class or id selectors. The difference is that an element can only have one unique id, while multiple elements can share the same class name.

    Original Description:

    Original Title

    Intro_integrative_Midterm_CSS_ID_Class

    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
    The document discusses HTML elements like <div>, <span>, and their attributes like class and id. It explains that <div> is used as a container and has no required attributes, while <span> is also a container but for text. The class attribute defines equal styles for elements with the same class name. The id attribute specifies a unique identifier for an element. CSS can style elements with class or id selectors. The difference is that an element can only have one unique id, while multiple elements can share the same class name.

    Copyright:

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

    Intro Integrative Midterm CSS ID Class

    Uploaded by

    Bryan Kenneth Tabares
    The document discusses HTML elements like <div>, <span>, and their attributes like class and id. It explains that <div> is used as a container and has no required attributes, while <span> is also a container but for text. The class attribute defines equal styles for elements with the same class name. The id attribute specifies a unique identifier for an element. CSS can style elements with class or id selectors. The difference is that an element can only have one unique id, while multiple elements can share the same class name.

    Copyright:

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

    Integrative

    Programming and
    Technologies 1
    MIDTERM –PART 2

    Created by :Mr. Marco Burgos


    HTML
    <div>,<span>,class
    and id
    HTML <div>,<span>,class and
    id
    01 HTML <div> Element
    .

    02 HTML <span>Element
    .

    03 HTML the class


    Attribute
    04 HTML the id
    Attribute
    HTML <div>
    Element
    The <div> Element
    • The <div> element is often used as a
    container for other HTML elements.
    • The <div> element has no required
    attributes, but style, class and id are
    common.

    Web Development
    When used together with CSS, the <div>
    element can be used to style blocks of
    content:
    Example:
    <div style="backgroundcolor:green;color:black;padding:20px;>

    <h2>London</h2>
    <p>London is the capital city of England. </p>
    <p>Its history going back to its founding by the Romans, who
    named it Londinium.</p>
    </div>
    Web Development
    OUTPUT:

    Web Development
    HTML <span>
    Element
    The <span> Element
    • The <span> element is often used as a
    container for some text.
    • The <span> element has no required
    attributes, but style, class and id are
    common.

    Web Development
    When used together with CSS, the <span>
    element can be used to style parts of the
    text:
    Example:

    <h1>My <span style="color:red">Important</span>


    Heading</h1>

    Web Development
    OUTPUT:

    Web Development
    HTML The
    Class Attribute
    What is the class attribute?
    • The HTML class attribute is used to
    define equal styles for elements with the
    same class name.
    • All HTML elements with the same class
    attribute will get the same style.

    Web Development
    Example
    <!DOCTYPE html> <div class="cities">
    <html> <h2>Paris</h2>
    </head>
    <head> <p>Paris is the
    <body> capital of
    <style> France.</p>
    .cities { <div class="cities"> </div>
    background-color: <h2>London</h2> <div class="cities">
    black; <p>London is the <h2>Tokyo</h2>
    color: white; <p>Tokyo is the
    capital of
    margin: 20px; capital of
    England.</p> Japan.</p>
    padding: 20px; </div> </div>
    }
    </style> </body>
    </html>
    Web Development
    Output:

    Web Development
    HTML The id
    Attribute
    What is id Attribute?
    • The id attribute specifies a unique id for
    an HTML element (the value must be
    unique within the HTML document).
    • The id value can be used by CSS and
    JavaScript to perform certain tasks for the
    element with the specific id value.

    Web Development
    In CSS, to select an element with a specific id,
    write a hash (#) character, followed by the id of
    the element:
    <style>
    #myHeader {
    background-color: lightblue;
    color: black;
    padding: 40px;
    text-align: center;
    }
    </style>
    </head>
    <body>
    <h2>The id Attribute</h2>
    <p>Use CSS to style an element with the id "myHeader":</p>

    <h1 id="myHeader">My Header</h1>

    Web Development
    In CSS, to select an element with a specific id,
    write a hash (#) character, followed by the id of
    the element:
    <style>
    #myHeader {
    background-color: lightblue;
    color: black;
    padding: 40px;
    text-align: center;
    }
    </style>
    </head>
    <body>
    <h2>The id Attribute</h2>
    <p>Use CSS to style an element with the id "myHeader":</p>

    <h1 id="myHeader">My Header</h1>

    Web Development
    OUPUT:

    Web Development
    What is the difference between
    Class and ID?
    • An HTML element can only have one
    unique id that belongs to that single
    element, while a class name can be used
    by multiple elements:

    Web Development
    <style>
    /* Style the element with the id "myHeader" */ <!-- A unique element -->
    #myHeader { <h1 id="myHeader">My Cities</h1>
    background-color: lightblue;
    color: black; <!-- Multiple similar elements -->
    padding: 40px; <h2 class="city">London</h2>
    text-align: center; <p>London is the capital of
    } England.</p>
    /* Style all elements with the class name "city" <h2 class="city">Paris</h2>
    */ <p>Paris is the capital of
    .city { France.</p>
    background-color: tomato;
    color: white; <h2 class="city">Tokyo</h2>
    padding: 10px; <p>Tokyo is the capital of
    } Japan.</p>
    </style>

    Web Development
    END THANK YOU !!!

    You might also like