| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
Font Family
The font-family property specifies the font for an element. Multiple font names can be specified as a “fallback” system; if the browser does not support the first font, it tries the next one.
Syntax:
font-family: "Times New Roman", Times, serif;
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Arial", "Helvetica", sans-serif;
}
</style>
</head>
<body>
<p>This is a paragraph with Arial or Helvetica font.</p>
</body>
</html>
Font Size
The ‘font-size‘ property sets the size of the font. It can be specified in different units like pixels (px), em, rem, percentages, and more.
Syntax:
font-size: 16px;
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 32px;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<p>This is a paragraph with 16px font size.</p>
</body>
</html>
Font Style
The ‘font-style‘ property specifies the font style for text. It can be normal, italic, or oblique.
Syntax:
font-style: italic;
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">This is normal text.</p>
<p class="italic">This is italic text.</p>
<p class="oblique">This is oblique text.</p>
</body>
</html>
Font Weight
The ‘font-weight‘ property sets the weight (or boldness) of the font. It can be normal, bold, bolder, lighter, or numerical values from 100 to 900.
Syntax:
font-weight: bold;
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}
p.bold {
font-weight: bold;
}
p.light {
font-weight: lighter;
}
p.heavy {
font-weight: 900;
}
</style>
</head>
<body>
<p class="normal">This is normal weight text.</p>
<p class="bold">This is bold text.</p>
<p class="light">This is lighter text.</p>
<p class="heavy">This is 900 weight text.</p>
</body>
</html>
Combining All Properties
You can combine all the font properties to style text comprehensively.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: "Verdana", "Geneva", sans-serif;
font-size: 18px;
font-style: italic;
font-weight: 700;
}
</style>
</head>
<body>
<p>This is a styled paragraph.</p>
</body>
</html>
- “Times New Roman”: Preferred font.
- Times: Fallback if “Times New Roman” is unavailable.
- serif: Generic family as the final fallback.
Font Weights in Numerical Values
- 100: Thin
- 200: Extra Light
- 300: Light
- 400: Normal (default)
- 500: Medium
- 600: Semi Bold
- 700: Bold
- 800: Extra Bold
- 900: Black (heavy)
These properties allow for precise control over text appearance in web design, ensuring that content is both visually appealing and readable across different devices and browsers.
