Preview Card Component with CSS

Community feedback

• 

  Vicktor•920

  @Victor-Nyagudi

  Posted over 2 years ago

  Good job on this one.

  I've noticed that you used an id attribute in many tags in your HTML for styling purposes. While this isn't bad for a simple solution like this one, it's good practice to use classes instead.

  An id has to be unique, so if you wanted to style, let's say, 10 things the same way, you'd end up having to create a unique id for each of them and remember to style each one correctly. Furthermore, you'd need to remember each id name which creates unnecessary extra work for you.

  Here's an example of HTML where id is used to style many things the same way. Avoid this!

  <ul id="articles">
       <li id="first-article"> 
            <h2 id="first-heading"> My Trip To Malaysia</h2>
  
            <p id="first-article-body"> Lorem ipsum dolor...</p>
       </li>
  
       <li id="second-article"> 
            <h2 id="second-heading"> Backpacking in Colorado</h2>
  
            <p id="second-article-body"> Lorem ipsum dolor...</p>
       </li>
  
       <li id="third-article"> 
            <h2 id="third-heading"> Why I Don't Like Restaurant Food</h2>
  
            <p id="third-article-body"> Lorem ipsum dolor...</p>
       </li>
  
       <li id="fourth-article"> 
            <h2 id="fourth-heading"> 5 Ways To Save During Trips</h2>
  
            <p id="fourth-article-body"> Lorem ipsum dolor...</p>
       </li>
  </ul>
  

  Here's what some of the CSS might look like. This can get very messy very quickly, especially in bigger projects.

  #first-article, 
  #second-article,
  #third-article,
  #fourth-article {
       color: black;
       border-radius: 5px;
       background-color: grey;
  }
  
  #first-heading,
  #second-heading,
  #third-heading,
  #fourth-heading {
       font-size: 2rem;
       font-weight: 600;
       color: purple;
  }
  

  With a class, you just need to make one class and apply it to the elements that need to be styled the same way.

  Here's HTML using a class.

  <ul class="articles">
       <li class="article"> 
            <h2 class="article-heading"> My Trip To Malaysia</h2>
  
            <p class="article-paragraph"> Lorem ipsum dolor...</p>
       </li>
  
      <li class="article"> 
            <h2 class="article-heading"> Backpacking in Colorado</h2>
  
            <p class="article-paragraph"> Lorem ipsum dolor...</p>
       </li>
  
       <li class="article"> 
            <h2 class="article-heading"> Why I Don't Like Restaurant Food</h2>
  
            <p class="article-paragraph"> Lorem ipsum dolor...</p>
       </li>
  
       <li class="article"> 
            <h2 class="article-heading"> 5 Ways To Save Money On A Trip</h2>
  
            <p class="article-paragraph"> Lorem ipsum dolor...</p>
       </li>
  </ul>
  

  Now in the CSS, you'll just need to style the .article class or .article-heading or whatever else you want to style, and it applies to every element that has that class.

  // Anything with an "article-heading" class will have this styling applied
  
  .article-heading {
       font-size: 2rem;
       font-weight: 500;
       color: purple;
  }
  
  // Anything with an "article-paragraph" class will have this styling applied
  
  article-paragraph {
       font-size: 1.125rem;
       font-weight: 400;
       color: black;
  }
  

  Try it in your code, and see the results for yourself.

  Here's an article on CSS selectors that will help you understand this topic more.

  Hope this helps.

  All the best with future solutions.

  10

  Marked as helpful