Selections – Get Specific With Inheritance
| Category | : CSS | Views | : 4627 | ||
| Version | : 2.0 | Rating | : | ||
| Type | : Text | ||||
Working with cascade styles may bring you a lot of advantages, but there are also a lot of things that you should be careful about. Think of a cascade style exactly as of a cascade – just like the water falls from a hill, just like that all the style effects will fall to the lower levels of the page just like snow is falling down a tree. Remember that a style will always cascade through your entire document and is applied wherever its selectors will be located if you forget to specify otherwise. Actually, this is a rule that will apply to all your descendant elements. For quite a while you may have been wondering whether there is a way to simply apply certain styles to a single element, but if it is embedded within another element (we are not talking about universal). Let me translate this – for example, can you use the italic tag within headlines be boldface even though they are not within a paragraph? Of course you can – this is where selectors step in. It is important for you to have a perfectly clear idea on how browsers move through a piece of code and how they decide to apply CSS styles. What you actually need to understand is the concept of tree structure. Tree structuring is very important whenever designing a web page because it involves the understanding of several other concepts such as selecting, specificity and inheritance. Further on we will discuss about how to get specific with inheritance.
Inheritance – How do you get specific with it?
First of all, what does inheritance relate to? It relates to the tree structure, about which we know (or just found out) that underlies between all web pages. For example, let’s talk about a very simple document that has only two paragraphs. If we were to see the tree structure this would illustrate exactly how those two paragraphs are subordinate to the main element – the body. The body is actually the parent element of both paragraphs. If we would be talking about a CSS stylesheet, picture that the two <p> (paragraphs) will be inside the <body> tags (parent element), therefore, we can consider the <p> elements children of the <body> tag. Now, when we talk about inheritance, there are a few terms that you should keep in mind – parent-child and ancestor-descendant. These are actually groups of words, but this is less important, what is important is to remember that parents are not all ancestors are parents even though all parents are ancestors.Let’s take a closer look upon the parent-child relationship. This is one of the closest relationships, and it is pretty clear why – the child will always be exactly one step below the parent in the tree structure. However, when we are talking about inheritance remember that it can flow down past a child (a child’s child and so on). An example of code might just shed some light:
<body>
<p>I wish I could be <i>more clear</i> with this!</p>
<p> But it is not needed anymore </p>
</body>
You see, here, in this piece of code the body is the parent of the two <p> tags. Still, the body is considered an ancestor only of the elements between the <i> tag. We call the <p> tags the children of the body and the element between the <i> tag the child (children) of its parent paragraph, but also the ancestor of the body. As simple as that!
More cool tech articles from other blogs.
