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

HTML-CSS
1

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

2

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.

4

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

5

Thank you so much for your help :smiley: