Scribd Logo
Upload

Welcome to Scribd!

  • 7 views

    LESSON 5, Internal and External CSS + Class and ID

    Uploaded by

    Aljohn Marilag
    This document discusses different types of CSS including internal CSS, external CSS, and the use of class and ID attributes. It provides examples of each: 1) Internal CSS defines styles directly in HTML using the <style> tag. External CSS links to a separate .css file using the <link> tag. 2) Class attributes apply the same styles to multiple elements and can be reused. ID attributes uniquely identify a single element and must not be duplicated. 3) Styles are defined for classes and IDs in the external .css file and applied using class and id selectors. This allows separation of design from content.

    Copyright:

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

    You might also like

    LESSON 5, Internal and External CSS + Class and ID

    Uploaded by

    Aljohn Marilag
    7 views12 pages
    This document discusses different types of CSS including internal CSS, external CSS, and the use of class and ID attributes. It provides examples of each: 1) Internal CSS defines styles directly in HTML using the <style> tag. External CSS links to a separate .css file using the <link> tag. 2) Class attributes apply the same styles to multiple elements and can be reused. ID attributes uniquely identify a single element and must not be duplicated. 3) Styles are defined for classes and IDs in the external .css file and applied using class and id selectors. This allows separation of design from content.

    Original Description:

    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
    This document discusses different types of CSS including internal CSS, external CSS, and the use of class and ID attributes. It provides examples of each: 1) Internal CSS defines styles directly in HTML using the <style> tag. External CSS links to a separate .css file using the <link> tag. 2) Class attributes apply the same styles to multiple elements and can be reused. ID attributes uniquely identify a single element and must not be duplicated. 3) Styles are defined for classes and IDs in the external .css file and applied using class and id selectors. This allows separation of design from content.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    7 views12 pages

    LESSON 5, Internal and External CSS + Class and ID

    Uploaded by

    Aljohn Marilag
    This document discusses different types of CSS including internal CSS, external CSS, and the use of class and ID attributes. It provides examples of each: 1) Internal CSS defines styles directly in HTML using the <style> tag. External CSS links to a separate .css file using the <link> tag. 2) Class attributes apply the same styles to multiple elements and can be reused. ID attributes uniquely identify a single element and must not be duplicated. 3) Styles are defined for classes and IDs in the external .css file and applied using class and id selectors. This allows separation of design from content.

    Copyright:

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

    LESSON 5: INTERNAL AND

    EXTERNAL CSS + CLASS AND


    ID
    BY: ALJOHN S. MARILAG
    2 OTHER TYPES OF CSS

    •1. Internal CSS


    •2. External CSS
    EXAMPLE OF INTERNAL CSS
    <!DOCTYPE html>
    <html>
    <style>
    h1{
    color:red;
    font-family:Comic Sans MS;
    }
    </style>
    <head>
    <title> CSS </title>
    </head>
    <body>

    <h1> Hello </h1>


    <p> Seen by 6:54pm </p>

    </body>
    </html>
    EXAMPLE OF EXTERNAL CSS
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="style.css">
    <title> CSS </title>
    </head>
    <body>

    <h1> Hello World </h1>


    <p> Hello Philippines </p>

    </body>
    </html>
    EXAMPLE OF EXTERNAL CSS

    style.css

    h1{
    color:red;
    font-family:Comic Sans MS;
    }
    CLASS ATTRIBUTE
    • is used to define equal styles for elements
    with the same class name.
    • can be used repeatedly.
    EXAMPLE OF CLASS ATTRIBUTE
    <!DOCTYPE html> <h1 class="Reply"> Hi </h1>
    <html> <p class=“Seen”> Seen by 6:41pm </p>

    <h1 class="Chat"> Where are you? </h1>


    <head> <p class=“Seen”> Seen by 6:42pm </p>
    <link rel="stylesheet" href=“class.css">
    <title> CSS </title> <h1 class="Reply"> I am here </h1>
    <p class=“Seen”> Seen by 6:43pm </p>
    </head>
    <body> </body>
    </html>

    <h1 class="Chat"> Hello </h1>


    <p class=“Seen”> Seen by 6:40pm </p>
    EXAMPLE OF CLASS ATTRIBUTE
    class.css

    .Chat{
    color:red;
    font-family:Comic Sans MS;
    }

    .Reply{
    color:blue;
    font-family:Algerian;
    }

    .Seen{
    color:green;
    font-family:Army;
    font-size:30px;
    }
    ID ATTRIBUTE
    • Specifies a unique id for an HTML element (the
    value must be unique within the HTML
    document).
    • In CSS, to select an element with a specific id,
    write a hashtag (#) character, followed by the id of
    the element.
    • HTML Bookmarks
    EXAMPLE OF ID ATTRIBUTE
    <!DOCTYPE html>
    <html> <h1 class="Reply"> Hi </h1>
    <p class=“Seen”> Seen by 6:41pm </p>

    <head> <h1 class="Chat"> Where are you? </h1>


    <p class=“Seen”> Seen by 6:42pm </p>
    <link rel="stylesheet" href=“id.css">
    <title> CSS </title> <h1 class="Reply"> I am here </h1>
    </head> <p class=“Seen”> Seen by 6:43pm </p>
    <body>
    </body>
    </html>
    <h1 class="Chat"> Hello </h1>
    <p id=“Seener”> Seen by 6:40pm </p>
    EXAMPLE OF ID ATTRIBUTE

    id.css

    #Seener {
    color:violet;
    font-family:Bodoni MT;
    font-size:50px;
    }
    EXAMPLE OF ID ATTRIBUTE
    <!DOCTYPE html> <h1 class="Reply"> Hi </h1>
    <p class=“Seen”> Seen by 6:41pm </p>
    <html>
    <h1 class="Chat"> Where are you? </h1>
    <head> <p class=“Seen”> Seen by 6:42pm </p>
    <link rel="stylesheet" href=“id.css">
    <h1 class="Reply"> I am here </h1>
    <title> CSS </title> <p class=“Seen”> Seen by 6:43pm </p>
    </head>
    <h1 id=“GoTo”> What is your message? </h1>
    <body> <p> This is my message </p>
    <a href="#GoTo”"> Go to message </a>
    <h1 class="Chat"> Hello </h1> </body>
    </html>
    <p id=“Seener”> Seen by 6:40pm </p>

    You might also like