css-quiz-rem-units.md

👋🏼 Welcome 👋🏼

Instagram | Twitter | LinkedIn

Choose your language 👅

• English
• Spanish

English version 🚀

If we want lists to have a font-size of 12px, What value in rem should we write ?

Click here to see the correct answer and explanation 👀

Correct Answer	Explanation
C	1rem equals the font size of the html element (which for most browsers has a default value of 16px). This means, if 100% = 16px, then 75% = 12px because (100% * 12) / 16 = 75% and it's equivalent to 0.75rem.

Explicación basada en 👉🏼 Rem in CSS: Understanding and Using rem Units | Sitepoint

Code:

HTML:

<h2>My List</h2>
<ul>
  <li>Read an article</li>
  <li>Call to my parents</li>
  <li>Try not to fall asleep</li>
</ul>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200&family=Sansita+Swashed:wght@600&display=swap');

html {
  font-size: 100%;
}

h2 {
  font-family: 'Sansita Swashed', cursive;
}

ul {
  font-family: 'Nunito', sans-serif;
  font-size: 0.75rem;
}

Spanish version 🚀

Si queremos que nuestra lista tenga un font-size de 12px, ¿Qué valor en rem deberíamos escribir?

Haz click aquí para ver la respuesta correcta y su explicación 👀

Respuesta correcta	Explicación
C	1rem es igual al tamaño de fuente del elemento html (que para la mayoría de los navegadores tiene un valor predeterminado de 16px). Esto quiere decir que si 100% = 16px, entonces 75% = 12px porque (100% * 12) / 16 = 75% que equivaldría a 0.75rem

Explicación basada en 👉🏼 Rem in CSS: Understanding and Using rem Units | Sitepoint

Código completo:

HTML:

<h2>My List</h2>
<ul>
  <li>Read an article</li>
  <li>Call to my parents</li>
  <li>Try not to fall asleep</li>
</ul>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200&family=Sansita+Swashed:wght@600&display=swap');

html {
  font-size: 100%;
}

h2 {
  font-family: 'Sansita Swashed', cursive;
}

ul {
  font-family: 'Nunito', sans-serif;
  font-size: 0.75rem;
}

C, ya que el font-size por defecto es de 16px. Y el 75% de 16 es 12 💚