Styling Text with CSS Properties

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

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.

Copy
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.

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

Copy
.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.