CSS header styling

Página 20

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:

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

Next page of the Free Ebook:

21Section styling in CSS