Skip to main content
Crowdfunding
Python + AI for Geeks
Practice

Styling Text with CSS Properties

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


font-weight​

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.


font-size​

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.


line-height​

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.


Example of Text Styling​

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

CSS Text Styling
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.

Applied intro Class to h1 Tag
<h1 class="intro">Hello there!</h1>
Definition of intro Class
.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.

Want to learn more?

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