The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Font Properties

Next ►
►

In this section, we will explore the various properties in CSS that allow you to control the appearance of text fonts on your web pages. Understanding these properties will enable you to create visually appealing and readable text content.

Key Font Properties

  1. font-family
  2. font-size
  3. font-weight
  4. font-style
  5. font-variant
  6. line-height
  7. font

  1. font-family

The font-family property specifies the font for an element. You can list multiple fonts as a "fallback" system. If the browser does not support the first font, it tries the next one.

p {
  font-family: "Arial", "Helvetica", sans-serif;
}

  1. font-size

The font-size property sets the size of the font. It can be defined in various units such as pixels (px), em, rem, percentages (%), and more.

h1 {
  font-size: 24px;
}

p {
  font-size: 1.2em;
}

  1. font-weight

The font-weight property sets the weight (or boldness) of the font. Common values are normal, bold, bolder, lighter, or numerical values ranging from 100 to 900.

strong {
  font-weight: bold;
}

h2 {
  font-weight: 600;
}

  1. font-style

The font-style property specifies the style of the font. It can be normal, italic, or oblique.

em {
  font-style: italic;
}

p.quote {
  font-style: oblique;
}

  1. font-variant

The font-variant property is used to display text in a small-caps font. It can be normal or small-caps.

p {
  font-variant: small-caps;
}

  1. line-height

The line-height property sets the height of a line box. It's commonly used to set the distance between lines of text.

p {
  line-height: 1.5;
}

  1. font (Shorthand Property)

The font property is a shorthand for setting multiple font-related properties in one declaration. It can include font-style, font-variant, font-weight, font-size, line-height, and font-family.

p {
  font: italic small-caps bold 16px/1.5 "Times New Roman", serif;
}

Practical Examples

Example 1: Basic Font Styling

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font-family: "Arial", sans-serif;
    }
    h1 {
      font-size: 2em;
      font-weight: bold;
    }
    p {
      font-size: 1em;
      line-height: 1.5;
    }
    em {
      font-style: italic;
    }
  </style>
  <title>Font Properties Example</title>
</head>
<body>
  <h1>Welcome to CSS Font Properties</h1>
  <p>This is a paragraph demonstrating various <em>font properties</em> in CSS.</p>
</body>
</html>

Example 2: Advanced Font Styling with Shorthand

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font: normal 400 16px/1.5 "Helvetica", sans-serif;
    }
    h1 {
      font: italic small-caps bold 24px/1.2 "Georgia", serif;
    }
    p {
      font: normal 300 14px/1.6 "Verdana", sans-serif;
    }
  </style>
  <title>Advanced Font Properties Example</title>
</head>
<body>
  <h1>Advanced Font Styling</h1>
  <p>This example demonstrates the use of the <code>font</code> shorthand property to apply multiple font-related styles in one declaration.</p>
</body>
</html>

Exercises

Exercise 1: Basic Font Styling

Task: Create a simple HTML page with a heading and a paragraph. Apply different font properties to the heading and paragraph.

Solution:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font-family: "Arial", sans-serif;
    }
    h1 {
      font-size: 2em;
      font-weight: bold;
      font-style: italic;
    }
    p {
      font-size: 1em;
      line-height: 1.5;
      font-variant: small-caps;
    }
  </style>
  <title>Exercise 1: Basic Font Styling</title>
</head>
<body>
  <h1>Exercise 1 Heading</h1>
  <p>This is a paragraph for Exercise 1.</p>
</body>
</html>

Exercise 2: Advanced Font Styling

Task: Create an HTML page with multiple headings and paragraphs. Use the font shorthand property to apply various font styles.

Solution:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font: normal 400 16px/1.5 "Helvetica", sans-serif;
    }
    h1 {
      font: italic small-caps bold 24px/1.2 "Georgia", serif;
    }
    h2 {
      font: normal 600 20px/1.3 "Times New Roman", serif;
    }
    p {
      font: normal 300 14px/1.6 "Verdana", sans-serif;
    }
  </style>
  <title>Exercise 2: Advanced Font Styling</title>
</head>
<body>
  <h1>Exercise 2 Main Heading</h1>
  <h2>Subheading 1</h2>
  <p>This is the first paragraph for Exercise 2.</p>
  <h2>Subheading 2</h2>
  <p>This is the second paragraph for Exercise 2.</p>
</body>
</html>

Conclusion

In this section, we covered the essential font properties in CSS, including font-family, font-size, font-weight, font-style, font-variant, line-height, and the shorthand font property. By mastering these properties, you can significantly enhance the typography of your web pages, making them more readable and visually appealing. Next, we will delve into text alignment and spacing to further refine your text styling skills.

◄ Previous
◄
Next ►
►

CSS Mastery: From Beginner to Advanced

Module 1: Introduction to CSS

Module 2: Text and Font Styling

Module 3: Box Model and Layout

Module 4: Positioning and Floating

Module 5: Flexbox

Module 6: CSS Grid

Module 7: Advanced CSS Techniques

Module 8: Responsive Design

Module 9: Preprocessors and Frameworks

Module 10: Best Practices and Optimization

Module 11: Project: Building a Responsive Website

The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved