logo

📘 CSS Properties – Fonts & Text: Long Answer Questions

🟦 Medium Level (Application & Explanation)

Q1. How does the font-family property in CSS help improve the readability and design of a webpage? Explain with examples.

Answer:

  • The font-family property selects the type of font used on a webpage, which affects the appearance and readability of the text.
  • Choosing appropriate fonts like serif fonts (e.g., Times New Roman) can give a traditional look, while sans-serif fonts (e.g., Arial, Verdana) provide a modern, clean style.
  • For example, using: 
    p {
  font-family: Arial, sans-serif;
}
    ensures that if Arial is not available, the browser uses any available sans-serif font, maintaining text clarity.
  • Good font choices contribute to user-friendly design, helping readers focus on content without strain.

Q2. Describe the difference between font-style: italic and font-style: oblique with examples.

Answer:

  • Both italic and oblique styles make the text slanted but differ slightly:
  • italic is a designed font style where letters are specially drawn to be slanted and often shaped differently from normal.
  • oblique is a simple slanting of normal text without altering the letter shape.
  • Example: 
    p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}
  • Usually, browsers may display little difference between them, but italic is generally preferred due to better readability and aesthetics.

Q3. Explain how the font-size property works with different units and why pixel units (px) are mostly used in CBSE Class 10.

Answer:

  • The font-size property controls how large or small text appears on screen.
  • Units like:
    • px (pixels): Fixed size, meaning text appears the same across devices.
    • em: Relative to the font size of the parent element.
    • %: Percentage relative to parent element’s font size.
  • CBSE Class 10 mostly uses px because:
    • It provides precise control over size, making it easy to set exact sizes.
    • It's simpler to understand and apply while learning CSS basics.
    • Example: 
      h1 {
  font-size: 24px;
}
p {
  font-size: 16px;
}

Q4. How does the font-weight property enhance the presentation of headings or important texts in a webpage?

Answer:

  • The font-weight property controls how thick or bold the text appears.
  • Making text bold draws attention and shows importance, especially for headings.
  • For example: 
    h2 {
  font-weight: bold;
}
  • Values like bolder or lighter allow subtle variations of thickness.
  • Using consistent boldness improves the hierarchy of information, making the page easier to navigate and visually appealing.

Q5. What is the significance of the text-align property? Give examples when you would use center and justify alignment.

Answer:

  • text-align property controls the horizontal placement of text inside elements.
  • center alignment is used when you want to
    highlight
    headings, titles, or small blocks of text    , for example: 
    h1 {
  text-align: center;
}
  • justify spreads text to align both left and right edges, creating a newspaper-like look, often used in paragraphs for formal documents: 
    p {
  text-align: justify;
}
  • Proper alignment improves readability and makes pages look professional and neat.

🟦 High Complexity (Analytical & Scenario-Based)

Q6. Imagine you are designing a webpage for an online book store. Explain how you would use font-family, font-size, and font-weight properties to enhance the user experience.

Answer:

  • For the book titles, I would use a serif font like “Times New Roman” to give a classic, elegant feel: 
    .book-title {
  font-family: "Times New Roman", serif;
  font-size: 24px;
  font-weight: bold;
}
  • For the descriptions, a sans-serif font like Arial makes text clear and easy to read on screens: 
    .description {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: normal;
}
  • Using bold font-weight for book titles draws attention immediately.
  • Adjusting font sizes helps to establish a clear hierarchy, guiding users smoothly from title to details. This enhances readability and overall shopping experience.

Q7. Analyze the impact of combining multiple font properties (font-family, font-style, font-size, font-weight, and text-align) in a single CSS rule.

Answer:

  • Combining font properties controls multiple aspects of text presentation simultaneously.
  • For example: 
    p {
  font-family: Verdana;
  font-style: italic;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
  • This sets the font type (Verdana) which is clean and modern, applies an italic style for emphasis, sizes the text at 18px for readability, makes the text bold for importance, and centers the text for visual focus.
  • The combined effect improves user attention, aesthetics, and clarity, making text suitable for highlighted content like quotes or introductions.
  • However, overusing many styles can cause visual clutter; balance is key.

Q8. If a browser cannot display the primary font specified in a font-family property, how does the fallback font system ensure proper display? Provide examples to illustrate this.

Answer:

  • The font-family property allows specifying multiple fonts separated by commas; these form a fallback sequence.
  • If the browser cannot find the first font, it tries the next font and so on until it finds a font it can display.
  • Example: 
    h1 {
  font-family: "Comic Sans MS", Arial, sans-serif;
}
  • If “Comic Sans MS” is unavailable on the device, the browser uses Arial. If Arial is also missing, it defaults to any available sans-serif font.
  • This mechanism ensures text is always shown legibly, preventing font errors from breaking user experience.

Q9. A student wrote this CSS snippet but the text does not appear bold as expected:

h2 {
  font-weight: bolder;
}

Explain possible reasons and how to fix them.

Answer:

  • Possible reasons:
    • The parent element’s font weight is already bold or heavier, so bolder has no noticeable effect.
    • The font being used does not support multiple weights beyond normal and bold.
  • To fix:
    • Use a specific weight like bold (which is 700), for example: 
      h2 {
  font-weight: bold;
}
    • Check and change the font-family to one that supports weight variations.
    • Ensure no CSS elsewhere overrides this style (use browser dev tools to check).

Q10. Discuss the advantages and disadvantages of using text-align: justify in webpage paragraphs from both design and readability perspectives.

Answer:

  • Advantages:

    • Creates clean vertical edges on both sides of the paragraph, giving a newspaper-like professional look.
    • Improves visual alignment and tabular display of content blocks.

  • Disadvantages:

    • Justify alignment can create uneven spaces between words (called “rivers”), which may make reading harder.
    • On narrow screens or lines, spacing can become too wide or inconsistent, reducing readability.
    • Sometimes forces awkward word breaks or hyphenations.

  • Overall, justify works well on long blocks of text if careful hyphenation and spacing controls are applied but may not be suitable for short texts or small devices.

Back to Topics

Take the test