logo

CSS Properties – Fonts & Text

These properties help you control the appearance of text on a webpage.
You can change things like font type, size, style, and alignment easily.

1. font-family Property

What is font-family?

font-family sets the type of font used for text.
It decides how your text looks, whether it's a fancy font or a simple one.

Important Points:

  • You can specify a font by name (like Arial, Verdana).
  • You can also specify a generic family like serif or sans-serif.
  • Browsers try the fonts in order; if the first is not available, they try the next.

Examples:

  • font-family: Arial; → Uses Arial font.
  • font-family: "Times New Roman", serif; → Uses Times New Roman if available, otherwise any serif font.
  • font-family: Verdana, sans-serif; → Uses Verdana or any sans-serif font if Verdana is missing.

Why is this important?

Choosing the right font makes the webpage more readable and attractive.

2. font-style Property

What is font-style?

This property controls the style of the font, like making the text italic or oblique.

Key Values:

  • normal → Regular text (default).
  • italic → Slanted text, commonly used for emphasis.
  • oblique → Similar to italic but less common and slightly angled.

Examples:

  • p { font-style: italic; } → Makes paragraph text italic.
  • h1 { font-style: oblique; } → Titles look angled but not fully italic.
  • div { font-style: normal; } → Text appears normal.

Importance:

It helps in highlighting or differentiating parts of the text.

3. font-size Property

What is font-size?

This controls how big or small your text appears.

Units:

  • px (pixels) → Fixed size; very common.
  • em → Relative to the parent's font size.
  • % → Percentage of the parent.

For Class 10 CBSE, mostly px is used.

Examples:

  • p { font-size: 20px; } → Text size is 20 pixels.
  • h1 { font-size: 30px; } → Large heading text.
  • span { font-size: 14px; } → Smaller inline text.

Why it matters:

Appropriate font size improves readability and design consistency.

4. font-weight Property

What is font-weight?

This property changes the thickness or boldness of the text.

Common Values:

  • normal → Regular font weight.
  • bold → Makes text bold.
  • bolder → Even bolder than bold.
  • lighter → Thinner than normal.

Examples:

  • h2 { font-weight: bold; } → Makes heading bold.
  • p { font-weight: lighter; } → Lighter text in paragraph.
  • div { font-weight: normal; } → Default thickness.

Importance:

Bold text grabs attention or shows importance.

5. text-align Property

What is text-align?

This controls how text aligns horizontally inside its container.

Values and Effects:

  • left → Text aligns on the left (default).
  • center → Text is centered.
  • right → Text aligns on the right.
  • justify → Text is spaced evenly; used in newspapers.

Examples:

  • p { text-align: center; } → Paragraph text is centered.
  • div { text-align: justify; } → Text looks neat with even edges.
  • h3 { text-align: right; } → Heading on the right edge.

Why is text-align important?

It makes content look organized and enhances visual appeal.

6. Combined Example Using All Properties

p {
  font-family: Verdana;
  font-style: italic;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

Explanation:

  • Uses Verdana font.
  • Text is italic.
  • Size is 18 pixels.
  • It’s bold.
  • Text is centered.

7. Important Exam Points to Remember

  • font-family controls font type.
  • font-style controls italic or normal.
  • font-size controls the size of the text.
  • font-weight controls boldness.
  • text-align controls text alignment.
  • Every CSS declaration ends with a semicolon (;).
  • Always use curly braces for CSS rules.

8. Sample Question

Q. Explain any three CSS font properties with examples.

Answer:

  1. font-family sets the type of font.

    Example: p { font-family: Arial; }

  2. font-size controls the size of the text.

    Example: h1 { font-size: 24px; }

  3. font-style makes text italic or normal.

    Example: p { font-style: italic; }

Activities & Observations

Activity: Changing Fonts of a Paragraph

Instructions:

  1. Create a simple HTML file with a paragraph <p>.
  2. Write CSS rules to change the font-family to different fonts — Arial, Times New Roman, and Verdana.
  3. Observe changes on the webpage.

Possible Observations:

  • Text appearance changes distinctly with each font.
  • Some fonts appear formal (Times New Roman), others casual (Arial).
  • The font is only applied if installed or supported by the browser.

Activity: Using font-style and font-weight

Instructions:

  1. Prepare three paragraphs.
  2. Apply font-style: normal, font-style: italic, and font-style: oblique respectively.
  3. In another set, use font-weight: normal, font-weight: bold, and font-weight: lighter.
  4. View the changes.

Observations:

  • Italic text is slanted; oblique is slightly different.
  • Bold text is thicker than normal.
  • Lighter text appears thin and soft.

Scenario Based Questions

  1. Scenario: You want your webpage headings to stand out and be bold and large.

    • Question: Which CSS properties will help you, and how will you use them?
    • Answer: Use font-weight: bold; to make text thick and font-size with a large value like 30px for size.

  2. Scenario: You want your webpage paragraph text to look formal and classic.

    • Question: Which font family might you choose?
    • Answer: Use font-family: "Times New Roman", serif; as it is a classic, formal font.

  3. Scenario: You want the text inside your webpage div to be evenly justified like in a newspaper.

    • Question: What CSS property and value will you use?
    • Answer: Use text-align: justify; to space out text evenly.

  4. Scenario: A student wants to emphasize a specific statement on the webpage by slanting it.

    • Question: Which property value combination will suit this purpose?
    • Answer: Use font-style: italic; on the text to slant it.

  5. Scenario: You want to provide fallback fonts so that if the preferred font doesn’t load, another font shows up.

    • Question: How do you write this in CSS?
    • Answer: Write multiple fonts separated by commas, e.g., font-family: "Arial", sans-serif; so if Arial doesn’t load, a sans-serif font is used.

Back to Topics

Take the test