Qr-Code challenge

Community feedback

• 

  P

  Gabriel Marques•90

  @GMarqzPosted 21 days ago

  Hi there!👋 Nice job on completing the challenge!

  About your concern with the :root pseudo-class... :root is helpful for declaring global CSS variables. Let’s say you're building a landing page and want to use green across multiple elements. With :root, you could do something like this:

  :root {
  --primary-color: green;
  }
  
  .container {
  background-color: var(--primary-color);
  }
  
  .form-btn {
  color: var(--primary-color);
  }
  

  Why is this useful?

  In the example above, only two elements use the color for simplicity. But imagine you have ten elements using the same shade of green. If you (or the designer) decide to change the primary color to blue, you won’t need to adjust each element individually. You just change the color in :root:

  :root {
  --primary-color: blue;
  }
  
  .container {
  background-color: var(--primary-color);
  }
  
  .form-btn {
  color: var(--primary-color);
  }
  

  This keeps your code cleaner and easier to maintain. Also, you can use variables for other properties like font-size, font-family, and more! You can read more about global css variables here📗

  Hope you find this helpful. 😊

  Happy coding!

  1