🎨 Fonts & Text in CSS

Fonts and text styling are some of the most important parts of web design. They decide how your words look, how readable they are, and even what kind of mood your website gives to the visitor.

Just like colors make your page vibrant, fonts make your page expressive. With CSS, you can control everything about text — from its size, weight, and style to how much space it has around it.

✍️ What are Fonts & Text in CSS?

Fonts are the typefaces (like Arial, Times New Roman, Roboto) that define the design of letters.
Text properties control how those letters appear on the screen (size, boldness, spacing, alignment, etc.).
Together, they allow you to design beautiful and readable content.

🔑 Common Font Properties in CSS

  • font-family → tells the browser which font to use (e.g., Arial, Verdana, or custom Google Fonts)
  • font-size → decides how big or small the text is (px, em, rem, %)
  • font-weight → controls the thickness of text (normal, bold, 100–900)
  • font-style → makes text italic, normal, or oblique
  • line-height → sets the space between lines of text
  • letter-spacing → controls spacing between letters
  • text-transform → changes text case (uppercase, lowercase, capitalize)
  • text-align → positions text (left, right, center, justify)

🌟 Why Fonts Matter?

Good fonts make your website professional and readable.
A playful font creates a fun vibe, while a clean sans-serif font feels modern.
Combining font styling with colors makes your site attractive and unique.

👉 So just like you learned Colors in CSS, now you also know how to style Fonts & Text in CSS to make your website look polished and eye-catching.

📝 CSS Font Properties – Detailed Explanation with VS Code Usage

1. Font Size (font-size)

What it does: Changes the size of your text.

Values: px, em, rem, %, small, large, etc.

<!DOCTYPE html>
<html>
<head>
; <title>Font Size Example</title>
<style>
p {
font-size: 20px; /* text will appear bigger */
}
</style>
</head>
<body>
<p>This is text with 20px font size.</p>
</body>
</html>

2. Font Family (font-family)

What it does: Defines the style of text.

Values: "Arial", "Times New Roman", "Courier New", serif, sans-serif.

<style>
p {
font-family: Arial, sans-serif;
}
</style>

3. Font Weight (font-weight)

What it does: Controls boldness of text.

Values: normal, bold, lighter, 100–900.

<style>
h1 { font-weight: bold; }
p { font-weight: 300; }
</style>

4. Font Style (font-style)

What it does: Makes text italic, normal, or oblique.

<style>
p { font-style: italic; }
</style>

5. Line Height (line-height)

What it does: Adjusts spacing between lines.

Values: Numbers (e.g., 1.5), pixels (e.g., 30px).

<style>
p {
font-size: 18px;
line-height: 30px;
} </style>

6. Text Transform (text-transform)

What it does: Changes capitalization.

Values: uppercase, lowercase, capitalize.

<style>
h1 { text-transform: uppercase; }
p { text-transform: capitalize; }
</style>

7. Text Decoration (text-decoration)

What it does: Adds/removes underline, overline, or strike-through.

Values: none, underline, overline, line-through.

<style>
a { text-decoration: none; }
p { text-decoration: underline; }
</style>

✅ With these examples, you can open VS Code → create an index.html file → add <style> inside <head> → paste the code → run in your browser to see changes in real time.