Understand inheritance and parenthood for CSS styles

CSS styles work with the principle of Inheritance, a few explanations:

The "Parent-Child" model

CSS inheritance is based on the Parent-Child model: each Child element inherits all of his Parent element's styles. For example, the <html> tag is parent of <body>, and <table> is parent for <tr> that is parent for <td>.

This inheritance system is very practical and avoid a lot of repetitions: when attributing properties to a parent element (for example font-size: 1.5em), it will be passed on to all its children elements but also to all of its descendance.

Attention: the child element will inherit all the parent element's properties only if these properties are inheritable. Inheritance does not work on all CSS properties (margin, padding and other block properties).

Here is an example to illustrate the inheritance principle. If a property is applied to <html> it will be transmitted to the children elements <body> and <div> which is a child element for <body>:

CSS code:
<style type="text/css">
<!--
   html {font-size: 1.5em;}
-->
</style>

Le code HTML :
<body>
   test
   <div>test</div>
</body>

To understand the diverse relationships between tags, there is a very complete website about that.

Attention: There are a few exceptions, all tags cannot be imbricated!

<a> link tag

The inheritance applies also to the <a> link tag.

Its children elements are the following pseudo-classes:

All properties applied to the <a> parent tags are transmitted to its children elements.

The code below is useless and redundant:

a {
text-align: center;
font-size: 1em;
text-decoration: none;
color: blue;
margin: 0 5px;
}
a:hover {
text-align: center;
font-size: 1em;
text-decoration: underline;
color: red;
margin: 0 5px;
}

You can go with this simpler code:

a {
text-align: center;
font-size: 1em;
text-decoration: none;
color: blue;
margin: 0 5px;
}
a:hover {
text-decoration: underline;
color: red;
}

The Inheritance by Imbrication of classes or Id

As there is an inheritance between different HTML tags, it is also possible to apply these inheritances to personalized classes or id.

You will only need to write within your CSS code all classes beside each other separated with a space: the first one will be the parent element for the second one, which will be parent element for the third one and so on and so forth, under the condition that each is imbricated within the other with the HTML code.

A few precisions: children elements are affected as long as they don't have a proper value affected to them. For example, if you have a color:red applied to <body>, all of the texts will be in red, except those elements to which there was another color value.

First example: 

.menu li
{ properties }

<li> will be child element for the ".menu" class. This will affect all the <li> elements that are contained in the ".menu" class and only those.

This saves you from writing <li class="menu"> for each of the elements in your list.

Second example: 

li .menu
{ properties }

".menu" will be child element for <li>tag. This will affect all of the elements contained in the "menu" class that are contained in a <li>

Don't think it is the same as: 

li,.menu
{ properties }

Here, there is no inheritance notion if the elements are separated with a coma. This example means ".menu" AND <li>. This will affect all off the elements within the "menu" class of the document AND all of the <li> tags of the document.

It is also not the same as:

li.menu
{ properties }

Here, only the <li> tags of :menu" class will be affected, there is no inheritance notion. It is very important not to forget the space when you write your code.

Third example: 

div.menu a:hover
{ properties }

Translation: I want to define ":hover", child element for <a>, that is child element for the ".menu" class applied to the parent block <div>. This will only affect the links that are hovered onto ("a:hover") that are contained within the <div> for ".menu" class.

There a question whether it is necessary to define the whole arborescence. Container blocks are most of the time <div> tags, so it is not necessary to define them in your inheritances.

Whether you write ".menu li" or "li" it won't change a thing to the inheritance level (it will change things to the target level, since the elements won't be defined the same within the page), but in all cases the <li> will inherite its parent element's properties, no matter what these elements are

Understand that the following HTML code will NOT be taken in consideration with the CSS defined as is the third example since the parent container is a <p> tag and not a <div>:

<p class="menu">
<a href="link.htm">link</a>
</p>

Utilisation example: a menu

Here is how to use these inheritance notions for a menu:

CSS code:

body {
margin: 10px;
padding: 0;
font: 14px Verdana, sans-serif;
}
.menu {
list-style-type: none;
}
.menu li {
float: left;
}
.menu a {
margin: 0 2px;
width: 100px;
height: 20px;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}
.menu a:hover {
background: #ccc;
border: 1px solid gray; 
}
.menu a:active {
background: gray;
color: #fff;
}

HTML code:
<body>
	<ul class="menu">
	<li><a href="">Menu 1</a></li>
	<li><a href="">Menu 2</a></li>
	<li><a href="">Menu 3</a></li>
	<li><a href="">Menu 4</a></li>
	</ul>
</body>

The case of relative fonts: em, %,...

It is recommanded to use relative font sizes ( principally em) in order to allow ahndicapped users to make the fonts bigger if necessary.

Units such as em and % are relative to the reference font: 1 em is equal to the soze of this font.

However, you must learn that the size of a the reference font is transmitted by inheritance as well: in the case of imbricated elements the reference font changes for each new container.

For example (see code below) if you define a reference size od 2 em within the <body>, then another 2em size in another child element of body (for example <table>), then the texts contained within the table will have a size of 2em comparatively to 2em, that is 4em! and so on and so forth if you cumulate the tags imbrications for children tags.

<style type="text/css">
<!--
body {font-size: 2em;}
table {font-size: 2em;}
-->
</style>

<body>
texte de 2em (reference : body)
<table>
	<tr>
		<td>2em text (reference : table included in body)</td>
	</tr>
</table>
</body>
Print article

Raphaël GOETTER
www.alsacreations.com