Blog preview card challenge

Community feedback

• 

  Alaa Mekibes•1,540

  @alaa-mekibesPosted 3 months ago

  Well done good job 🎉

  • Just use css variables to improved maintainability like this:

  :root {
      --bg-color: hsl(210, 46%, 95%);
      /* Add your other colors here */
  }
  
  body {
      background-color: var(--bg-color);
      /* Other properties */
  }
  

  Fantastic progress, keep going, you're doing brilliantly!

  Marked as helpful

  1

  ---

  

  Abigail Samanta Elis•30

  @abigailelisPosted 3 months ago

  @alaa-mekibes thank you so much, can you tell me what does this css variables?

  1

  

  Alaa Mekibes•1,540

  @alaa-mekibesPosted 3 months ago

  @abigailelis Hi,

  CSS variables, also known as custom properties, are reusable values defined with the -- prefix in the :root or any other selector. For example:

  :root {
      --main-color: #3498db;
      --padding: 1rem;
  }
  
  div {
      background-color: var(--main-color);
      padding: var(--padding);
  }
  

  They help maintain consistency, make your code more readable, and allow for easier updates across your styles.

  For example, if I have 5 elements with the same color and later want to change their color, I don't need to update each element individually. Instead, I can simply modify the color in the :root, and it will automatically apply to all the elements. This approach is especially helpful for maintaining the visual identity of the site.

  Marked as helpful

  1

  

  Abigail Samanta Elis•30

  @abigailelisPosted 3 months ago

  @alaa-mekibes thank you so much for your answer !! It's very helpful for me. I didn't know about those CSS variables

  1