Question

For CSS elements, when you should use class and when you should use id to form HTML component. TT T Arial 3 (12pt) TEE 5.02 Path: P Click Submit to complete this assessment

Answer 1

`Hey,

Note: If you have any queries related the answer please do comment. I would be very happy to resolve all your queries.

You assign an id attribute to an HTML element when You want to stylize that element differently than other elements of the same type.

For ex.

  <p id="alert">Important! All classes are cancelled today.</p>

To add style to an element with an id, you preface the id with a # symbol in your CSS. For example, here's how we could make our alert paragraph appear in a big yellow box with a black border and big black text:

  p#alert {
    color: black;
    font-weight: bold;
    background: #FFFF66; /* yellow */
    border: 2px solid black;
    padding: 1em;
  }

Sometimes there might be a group of elements that you want to stylize in a certain way. For example, let's say you're creating an entertainment web page that includes several movie reviews, in addition to other content. The entire content of each review (a heading with the movie title, plus several paragraphs) is wrapped in a <div> in order to keep it all together in one box. The first paragraph of each review is a short summary describing the movie, then all remaining paragraphs contain the content of your critique of the movie. You may want to stylize the <div> elements that contain each review differently than other <div> elements on the page, so reviews all have a distinct look, but consistent with one another. You could accomplish this by assigning class="review" to each of these reviews. Also, you might want the summary paragraph to have a distinctive look, different from all other paragraphs. You could accomplish this by assigning class="summary" to each summary paragraph. Your code might look something like this:

  <div class="review">
    <h2>The Godfather</h2>
    <p class="summary">The Godfather (1972) is the greatest movie of all time,
      according to numerous surveys of movie critics and audiences alike.</p>
    <p>The Godfather is... (your review here)</p>
  </div>
  <div class="review">
    <h2>Avatar</h2>
    <p class="summary">Avatar (2009) is the highest grossing film of all time,
      earning approximately $2.8 billion.</p>
    <p>Avatar is... (your review here)</p>
  </div>

To add style to all elements that are part of a particular class, you preface the class name with a period (.) in your CSS. For example, here's how we could add a pale blue background and dark blue border to all movie reviews, and add italics to all summary paragraphs:

  div.review {
    background-color: #E6EBF5; /* pale blue */
    border: 1px solid #003399; /* dark blue */
  }
  p.summary {
        font-style: italic;
  }

Kindly revert for any queries

Thanks.