Complete CSS course

4.5

(2)

35 pages

All courses > Information Technology > Web Development ::

CSS header styling

Capítulo 20

Estimated reading time: 3 minutes

+ Exercise

Listen in audio

0:00 / 0:00

Styling Headers in CSS

Headers are important elements on a web page, as they are responsible for indicating the hierarchy of content and helping the user understand the structure of the site. In addition, the styling of headings can directly impact the appearance and readability of the text.

Selecting headers

To style the headers in CSS, it is necessary to select the corresponding HTML element. Headers are represented by the tags <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.

To select all headings at once, we can use the * universal selector combined with the h1 type selector, for example:

* {
  font-family: Arial, sans-serif;
}

h1 {
  fontsize: 36px;
  font-weight: bold;
  color: #333;
}

In this example, all elements on the page will have the font set to Arial, or a sans-serif font if Arial is not available. <h1> headers will have a font size of 36 pixels, bold and black color.

Styling each header individually

If you need to style each header individually, you can use class or ID selectors. For example:

Continue in our app.

You can listen to the audiobook with the screen off, receive a free certificate for this course, and also have access to 5,000 other free online courses.

Or continue reading below...

Download the app

<h1 class="main-title">Main title</h1>

.main-title {
  fontsize: 48px;
  color: #ff0000;
}

In this case, only the header with the main-title class will have a font size of 48 pixels and red color.

Other styling properties

In addition to font properties, we can use other CSS properties to style headers, such as:

background-color: sets the background color of the header;
padding: defines the internal spacing of the header;
margin: defines the outer spacing of the header;
text-align: defines the alignment of the text within the header;
border: Sets the header border.

With these properties, you can create custom headers that fit the design of the site and make reading more pleasant for the user.

Conclusion

Styling CSS headers is an important part of designing web pages, as it helps indicate the hierarchy of content and improves readability of text. With the right CSS properties, you can create custom headers that fit your site design and make the user experience more enjoyable.

Now answer the exercise about the content:

_Which universal selector can be combined with the "h1" type selector to select all headers at once?

You are right! Congratulations, now go to the next page

You missed! Try again.

The combination of the universal selector * with the type selector h1, as presented in the options, is not correct. However, * h1 would mean any h1 element that is a descendant of any parent which doesn't match the concept provided. The universal selector before an element directly affects it.

Next chapter

Section styling in CSS