Reputation: 2940
I have reduced my problem to a trivial example:
<!DOCTYPE html>
<html lang="en_US">
<head>
<meta charset="utf-8" />
<style>
body,
h1,
h2,
h3,
h4,
h5 {
font-family: 'Times New Roman', sans-serif
}
body {
font-size: 16px;
font-family: sans-serif;
}
</style>
</head>
<body>
<a> a simple text w </a>
<h1> a simple h1 text w </h1>
<h2> a simple h2 text w </h2>
</body>
</html>
Which I would expect to produce three lines of sans-serif text. The web inspector indicates that all three lines should be sans-serif
.
Tested on Chromium and Firefox, I get three lines of text, one sans-serif, and two more, for h1
and h2
in serif font:
What is the explanation of this behavior? What is my misunderstanding of the way font appearances are inherited and applied?
Upvotes: 1
Views: 685
Reputation: 1738
Since you declared Times New Roman
for both, the h1
and the h2
elements, they both render with this font.
And since the last definition in CSS has a higher order than the first one, the a
elements inherits the style set for the body
selector, which is: sans-serif
.
This is not an issue, it is as expected.
If you would wrap the <a></a>
element inside a (for example) <h3></h3>
, you will see, that it will inherit the styles from its parent and displays as serif Times New Roman
as well.
<!DOCTYPE html>
<html lang="en_US">
<head>
<meta charset="utf-8" />
<style>
body,
h1,
h2,
h3,
h4,
h5 {
font-family: 'Times New Roman', sans-serif
}
body {
font-size: 16px;
font-family: sans-serif;
}
</style>
</head>
<body>
<a> a simple text w </a>
<h1> a simple h1 text w </h1>
<h2> a simple h2 text w </h2>
<h3>
<a> a simple text w </a>
</h3>
</body>
</html>
Upvotes: 3