Styling Text with CSS Properties

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

This property is used to adjust the thickness of the text.

The values can be normal (default), bold (bold), lighter (lighter), numbers (such as 400, 700), etc.

This property is used to adjust the size of the text.

You can specify the text size in units like pixels (px), points (pt), percentages (%), and more.

This property adjusts the spacing between lines of text when it spans multiple lines.

To compare, line-height can be thought of as "how high up and down a single line of text goes."

The values can be in pixels (px), numbers, percentages (%), etc.

For example, the following CSS code sets the text thickness to bold, text size to 16 pixels (px), and line height to 1.5 times (line-height: 1.5).

Copy
p {
  font-weight: bold;
  font-size: 16px;
  line-height: 1.5;
}

With these settings, the text within the <p> tags will appear bold, have a size of 16 pixels, and the line spacing will be set to 1.5 times.

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

Copy
<h1 class="intro">Hello there!</h1>

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

You can notice that the thickness of the text within the h1 tag becomes normal, and the text size is slightly larger.