CSS `font-size` examples: Making headings bigger and body text smaller

📚 CSS font-size Examples: Making Headings Bigger and Body Text Smaller

The font-size property in CSS controls the size of text. It's essential for creating readable and visually appealing web pages. You can set sizes using absolute units (like pixels) or relative units (like ems and rems). Let's explore how to make headings bigger and body text smaller!

Quick Study Guide

• 📏 Absolute Units: Pixels (px) provide fixed sizes.
• ⚖️ Relative Units:
  • em: Relative to the font-size of the element. 1em is equal to the current font-size.
  • rem: Relative to the font-size of the root element (html).
• 🧮 Formulas & Conversions:
  • To calculate em: Target Size / Parent Size = em Value.
  • Example: If the parent font-size is 16px and you want the element to be 24px: $24 \div 16 = 1.5em$
• 💡 Best Practices: Use rem for overall scalability and em for local component sizing.
• 💻 CSS Syntax: font-size: 16px;, font-size: 1.2em;, font-size: 1rem;

Practice Quiz

1. What CSS property is used to control the size of text?

   1. A. text-size
   2. B. font-size
   3. C. text-height
   4. D. font-height

2. Which unit is an absolute unit for font-size?

   1. A. em
   2. B. rem
   3. C. px
   4. D. %

3. What does 1em represent?

   1. A. 10 pixels
   2. B. The font-size of the root element
   3. C. The current font-size of the element
   4. D. 1 rem

4. Which unit is relative to the root element's font-size?

   1. A. em
   2. B. px
   3. C. rem
   4. D. pt

5. If the parent font-size is 20px and you set an element's font-size to 1.5em, what is the computed font-size of the element?

   1. A. 15px
   2. B. 20px
   3. C. 30px
   4. D. 35px

6. Which of the following is the correct CSS syntax to set the font-size to 18 pixels?

   1. A. font-size: 18;
   2. B. font: 18px;
   3. C. font-size = 18px;
   4. D. font-size: 18px;

7. Why is it recommended to use relative units like rem for font-size?

   1. A. To make the text look smaller
   2. B. For better scalability and accessibility
   3. C. To make the text look bigger
   4. D. Because absolute units are not supported