HTML/CSS 3-Column Card

Community feedback

• 

  Rebecca Padgett•2,060

  @bccpadgePosted 3 months ago

  Hi there!

  • You don't have to wrap the <a> tag in a <div> and its okay to add CSS styling to the <a> tag.
  • Add aria-label="learn more about sedan cars" to the <a> tag to make link more the accessible for screen readers.
  • Here is an article explain the difference between a <button> and <a> tag
    • Links and Buttons on websites

  a{
   background-color: var(--Very-light-gray);
   border: 2px solid var(--Very-light-gray);
   transition all 350ms ease-in-out;
  }
  
  a:hover{
   background-color: transparent;
   color: var(--Very-light-gray);
  }
  
  

  In CSS you can add another CSS class like .button-sadans to change the button text color.

  Here is my solution to this challenge: 3 Column preview card component

  I hope you find these tips useful! Don’t hesitate to reach out if you have any questions or need further guidance. Keep up the amazing work!

  Marked as helpful

  2
• 

  IO•690

  @i000oPosted 3 months ago

  Hi!

  1. Consider using the <button> element for Learn More instead of <a>. This might be why the styles weren't behaving how you expected.

  2. I've seen a few people do this and I initially did the same thing, but it's not :hover, it's :active which is different. Both are also different from :focus. Brush up on these! :active is when a button is clicked. I think if you adjust this your background styles will comply more towards your intention than before. You can view my output.css file to see how I achieved it. Note that I used Sass to pre-process my CSS (which I'd recommend if you're interested - See Sass basics).

  3. You can target a group of elements by only referring to the element itself, not the pseudo-classes. For instance, if you change your <a>s to <button>s, you can then just target <button> and apply all the common styles there, and then hone in on each column's background-color on :active using your pseudoclasses.

  Hope that helps!

  Marked as helpful

  0