Curious about Adding a box-shadow to a Card-like Element

Curious about Adding a box-shadow to a Card-like Element
0

This code passes the task challenge, but what I wanted to ask is why did we create a thumbnail id with a box-shadow property, while adding the box-shadow property to the class .fullcard would have the same effect? Wouldn’t it be simpler to just add it to .fullcard?

Your code so far


<style>
  h4 {
    text-align: center;
    background-color: rgba(45, 45, 45, 0.1);
    padding: 10px;
    font-size: 27px;
  }
  p {
    text-align: justify;
  }
  .links {
    text-align: left;
    color: black;
  }
  
  
  #thumbnail {box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}

  .fullCard {
    width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
    
  }
  .cardContent {
    padding: 10px;
  }
  .cardText {
    margin-bottom: 30px;
  }
</style>
<div class="fullCard" id="thumbnail">
  <div class="cardContent">
    <div class="cardText">
      <h4>Alphabet</h4>
      <hr>
      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element

There is really no good reason for it from a development perspective. Using ids for CSS styling is generally not a good idea because of potential specificity issues it can cause.

Using a new class would make sense because then you have a reusable box shadow class you can add to elements as needed. Like a utility class.

It is likely done for the test so it has an id it can target, but that also isn’t really necessary. It might be better to change that challenge.

Totally agree with lasjorb on this. Avoid using ids to change css unless you’re intentionally trying to overwrite another selector. Even then try to use attributes or tag name first if you can.

Thank you! This definitely clarified things for me :slight_smile:

Thank you so much for your help :smiley: