Initially, I had separate h1 and h2 tags with the same css rules below eachother to make up my header. I had both of their fonts equal to 15px:
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Coming soon..</title>
<style>
h1 {
font-size: 15px;
}
h2 {
font-size: 15px;
}
</style>
<body>
<h1> Some header.. </h1>
<h2> Some smaller header </h2>
</body>
</html>
Then I used the header tag to group h1 and h2 and created a style instead of h1 and h2. Their font size increases dramatically, despite the fact that the pixels have the same font size:
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Coming soon..</title>
<style>
header{
font-size: 15px;
}
</style>
<body>
<header>
<h1> Some header.. </h1>
<h2> Some smaller header </h2>
</header>
</body>
</html>
I can easily override these problems by including the rules for h1 and h2, as well as the header, but I just want to know why the header font size: 15px is larger than h1 font-size: 15px?
, h1 h2 - , , h1/h2.
.
, , !