How to Change Size of Headers in CSS
There are different types of headers in HTML, which can be defined using the h1 to h6 tags. The h1 tag is the largest and most important header, while the h6 tag is the smallest. You can change the size of a header by changing its font-size and line-height properties.
In most cases, we only need to set font-size property.
<html>
<head>
<title>Change headers' font sizes</title>
<style text="text/css">
.wrapper{margin: 2em; font-family: sans-serif;}
h1{font-size: 1.8em;}
h2{font-size: 1.5em;}
h3{font-size: 1.17em;}
h4{font-size: 1em;}
h5{font-size: 0.9em;}
h6{font-size: 0.8em;}
</style>
</head>
<body>
<div class="wrapper">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div>
</body>
</html>
To change the size of a header:
In your CSS file, select the header you want to modify. For example, if you want to change the size of your h1 header, you would add the following code to your CSS file:
h1 { font-size: 24px; line-height: 36px; }
Change the values of the font-size and line-height properties to whatever you want. In the example above, we changed our h1 header’s font-size to 24px and its line-height to 36px.