Scribd Logo
Upload

Welcome to Scribd!

  • 1-3 CSS Intro 1 - 2 Classes Vs IDs

    Uploaded by

    David Suárez Pérez
    5 views8 pages
    CSS classes allow targeting of multiple similar elements with the same styling, classes are not unique so can be used on many elements, while IDs are unique identifiers used to select a single element. CSS classes and IDs can be combined to select and style specific elements on a page.

    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
    CSS classes allow targeting of multiple similar elements with the same styling, classes are not unique so can be used on many elements, while IDs are unique identifiers used to select a single element. CSS classes and IDs can be combined to select and style specific elements on a page.

    Copyright:

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

    1-3 CSS Intro 1 - 2 Classes Vs IDs

    Uploaded by

    David Suárez Pérez
    CSS classes allow targeting of multiple similar elements with the same styling, classes are not unique so can be used on many elements, while IDs are unique identifiers used to select a single element. CSS classes and IDs can be combined to select and style specific elements on a page.

    Copyright:

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

    CSS CLASSES

    CSS Classes allows us to target several elements that may share similarities.

    Note that:
    Classes are NOT unique
    You can use the same class on multiple elements
    You can use multiple classes on the same element
    You can select a class using .class-name { }
     
    CSS CLASSES

    https://codepen.io/f3r/embed/vYgeJoa
    CSS IDs

    The ID selector uses the id attribute of an HTML tag to find one specific element.

    We can give any name we want to our ID attribute, besides the obvious reserved
    words, such as tag names, etc.
    An ID is unique within a page
    You should use the id selector when you want to find a single, unique element
    In the CSS document, you use a hashtag (#) to denote an ID
     
    CSS IDs index.html

    1 <!DOCTYPE>
    2 <html>
    css/style.css 3
    4
    <head>
    <title>Classes vs Ids </title>
    5 <link rel="stylesheet"
    href="styles.css">
    1 .comments { 6 </head>
    2 font-weight: bold; 7 <body>
    3 color: #64FE2FE; /* green */ 8 <div class="comments">
    4 } 9 Hello
    5 10 </div>
    6 #dolphin { 11
    7 font-style: italic; 12 <div class="comments">
    8 color: #0040FF; /* blue */ 13 Hello
    9 } 14 </div>
    15
    16 <div class="comments">
    17 Hello
    18 </div>
    19
    20 <section id="dolphin">
    21 I am a dolphin
    22 </section>
    23 </body>
    24 </html>
    CSS IDs index.html

    1 <!DOCTYPE>
    2 <html>
    css/style.css 3
    4
    <head>
    <title>Classes vs Ids </title>
    5 <link rel="stylesheet"
    href="styles.css">
    1 .comments { 6 </head>
    2 font-weight: bold; 7 <body>
    3 color: #64FE2FE; /* green */ 8 <div class="comments">
    4 } 9 Hello
    5 10 </div>
    6 #dolphin { 11
    7 font-style: italic; 12 <div class="comments">
    8 color: #0040FF; /* blue */ 13 Hello
    9 } 14 </div>
    15
    16 <div class="comments">
    17 Hello
    18 </div>
    19
    20 <section id="dolphin">
    21 I am a dolphin
    22 </section>
    23 </body>
    24 </html>
    CSS IDs … What would happen here?
     
    index.html css/style.css

    1 <!DOCTYPE> 1 .comments {
    2 <html> 2 font-weight: bold;
    3 <head> 3 color: #64FE2FE; /* green */
    4 <title>Classes vs Ids </title> 4 }
    5 <link rel="stylesheet" 5
    href="css/style.css"> 6 #dolphin {
    6 </head> 7 font-style: italic;
    7 <body> 8 color: #0040FF; /* blue */
    8 <section id="dolphin"> 9 }
    9 I am a dolphin
    10 </section>
    11 <section id="dolphin">
    12 I am a elephant
    13 </section>
    14 </body>
    15 </html>
    Multiple classes + multiple elements index.html
     
      1 <p class="first second"> Multiple classes </p>

    You can also chain classes together,


    applying several classes to one css/style.css
    element.
    1 .first {
    2 font-size: 40px;
    The possibilities are endless! 3 }
    4
      5
    6
    .second {
    color:red;
    7 }
    Multiple classes + multiple elements
    index.html
     
    1 <ul>

    We can even use classes/IDs with


    2 <li class="why">Why a dolphin?</li>
    3 <li class="why" id="not">Why not?</li>

    elements to select and style HTML


    4 </ul>

      css/style.css
     
    Can you guess the color of both <li>? 1
    2
    li {
    text-align: center
    3 }
    4
    5 li.why {
    6 color: yellow
    7 }
    8
    9 li#not {
    10 color: green
    11 }

    You might also like