I'm looking for an expanded instruction on the value "font-family" (eg. inherited)

HTML & CSS
1

What I’m trying to learn is the “inheriting” relationship of the three different font families. Here are three examples we can work with:

[LIST=1][]Serif, Century
[]Sans-Serif, Arial
[*]Monospace, Lucida Console[/LIST]
I’m not intending on using all three, but I do need to understand how they relate to one another — their respective “inheritability” status. One example to start with is:

PARAGRAPH 1 gets Serif
PARAGRAPH 2 gets Monospace for just one sentence, let us say, and then defaults to Serif
PARAGRAPH 3 gets one word Sans-Serif, and then restores to PARAGRAPH 1’s setting.

I’m not intending to use anything this disgusting :lol: lol . . . just trying to see how the “flowchart” of inherits works. Nesting, etc. . . .

Thanks Sitepoint.

s

2

Have you tried setting up an example of this? It would be good to post the code you have so far. Is it not working for you? The font setting will be inherited unless you override it.

3

Hi,

As Ralph said the font will inherit unless you have over-ridden the rules with more specific rules. Inheriting fonts is no different from inheriting the color of the text and how you apply it. Once you over-ride a section with a new rule then all elements in that vicinity get the new styles as long as they are under the influence of that new rule and do not have more specific styles.

e.g.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
	font-family:Arial, Helvetica, sans-serif;
	color:green;
}
.font2 {
	font-family:Verdana, Geneva, sans-serif;
	color:blue;
}
.font3 {
	font-family:Tahoma, Geneva, sans-serif;
	color:red;
}
</style>
</head>

<body>
<p>I will be Arial </p>
<p class="font2">Anything in this paragraph will be Verdana</p>
<p class="font3">Anything in this div will be Tahoma</p>
<p>I will be Arial</p>
<p>This all assumes the user has those fonts available on their system otherwise one of the fallback families listed in each rule will be used instead</p>
</div>
</body>
</html>
4

Hi Paul, Ralph . . . Well I haven’t coded (anything) because I was hoping there would be a graphical “flowchart thing” kind of along the lines of innumerable HTML beginner sites include images of what to expect, along with their CSS. It isn’t a priority, I just wondered if you all had sites to recommend to me.

So Paul, I’ve downloaded your code and will take it out for a test drive. Thanks.