How to change the size of the header in CSS
The header of a webpage often referred to as the header section or header element, is typically located at the top of the page and contains important information such as the website logo, navigation menu, and other key elements. Changing the size of the header can help to make it more visually appealing and can also improve the overall layout and design of the webpage.
Specifying different units
To change the size of the header in CSS, we can use the height property. This property sets the height of an element, including the header section, and can be specified using a variety of units such as:
- Pixels (
px) - Ems (
em) - Rems (
rem) - Viewport height (
vh)
Pixels
This is the most commonly used unit for setting the size of elements in CSS. It represents a fixed size in pixels, a physical unit of measurement corresponding to a single dot on a computer screen.
header {
height: 100px; /* set the height of the header to 100 pixels */
}
Ems
This unit is based on the size of the font used in the element. One em is equal to the font size of the element’s parent.
header {
font-size: 18px; /* set the font size of the header to 18 pixels */
height: 3em; /* set the height of the header to 3 times the font size */
}
In this example, if the font size of the header’s parent element is pixels, then the height of the header will be pixels ( pixels).
Rems
This unit is similar to ems, but it’s based on the root element size (usually the <html> tag). One rem is equal to the font size of the root element.
html {
font-size: 16px; /* set the font size of the root element to 16 pixels */
}
header {
font-size: 18px; /* set the font size of the header to 18 pixels */
height: 3rem; /* set the height of the header to 3 times the root font size */
}
In this example, if the root element’s font size is pixels, then the height of the header will be pixels ( pixels).
Viewport height
This unit represents a percentage of the viewport height (the height of the browser window).
header {
height: 20vh; /* set the height of the header to 20% of the viewport height */
}
In this example, if the height of the browser window is pixels, then the height of the header will be pixels (% of pixels).
Example
Here’s an example of how to change the size of a header and include a navigation menu using HTML and CSS:
Note: To experiment with other units, edit line 4 of the
styles.cssfile and observe the outcome.
Free Resources
