Styling Text with CSS Properties

Let's explore the core CSS properties related to text: font-weight, font-size, and line-height.

font-weight

This property is used to adjust the thickness of letters.

Values include normal (default), bold, lighter, and numeric values like 400, 700, etc.

This property is used to adjust the size of letters.

Text size can be specified in units like pixels (px), points (pt), percentage (%), etc.

When text spans multiple lines, this property adjusts the spacing between lines.

To visualize line-height, think of it as "how high up and down one line of text goes."

Values include pixels (px), numbers, and percentages (%).

For example, the following CSS code sets the thickness of the text to bold, the font size to 16 pixels, and the line height to 1.5 times.

CSS Text Styling
p {
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
}

This configuration makes the text within <p> tags appear bold, sets the font size to 16 pixels, and spaces the lines at 1.5 times the line height.

Now, let's change the text style of the <h1> tag representing the first piece of text.

Applying intro Class to h1 Tag
<h1 class="intro">Hello!</h1>

Defining the intro Class
.intro {
  font-weight: normal;
  font-size: 20px;
  line-height: 1.8;
}

You'll notice that the thickness of the text within the h1 tag is reduced, and the font size is slightly larger.

Join CodeFriends Plus membership or enroll in a course to start your journey.