Welcome to Lesson 6 of the Customize Thesis Like a Pro tutorial series. In this lesson, you’ll learn about the CSS concepts of inheritance and specificity and then we’ll explore how those concepts are applied by the Thesis theme in such a way as to make customizing your site easier.
What are CSS Inheritance and Specificity?
Inheritance is the process by which a style is passed on from the parent element to a child element and specificity is the means by which a browser distinguishes between potentially conflicting CSS declarations. Understanding how the Thesis theme uses these concepts can make styling and troubleshooting much easier.
In the first part of this lesson, we’ll learn about the concept of inheritance and look at examples of how it is used in Thesis. In the 2nd part of the lesson, we’ll learn about specificity and learn how it affects the styles of headings in Thesis. In Part 3, we’ll look at how specificity and Thesis custom body classes work together. And in the final parts of the lesson we’ll look at how inheritance and specificity affect the Thesis Navigation menu.
CSS Inheritance and the Thesis Theme
First, we’re going to examine inheritance and see how it applies to the Thesis theme. The first step is understanding the parent-child relationships in Thesis. A parent element is a containing element and a child element is an element that is contained. And generally speaking, children elements inherit their properties from their parents. In this example, the body is the main container of all of the web page that is visible. So the body is the main parent element. In the Thesis page framework, inside the body is the div id container. Inside of div id container is div id page. Inside of div id page is div id content box. Inside of div id content box is div id content. Inside of div content is div class post box. And inside of that is div class format text. So we have this progression of parent and child elements that all play a role in the inheritance of properties of a style.
Thesis Theme Page Framework
Let’s look at this in a less abstract way with this diagram at thesiscss.com. This is a site that I’ve worked out for the purpose of demonstrating things like this. In the page framework you can see that the main elements of the page are first, the body which is represented by this green color. That is the body of the page. Next, you have the container which is the yellow color. Inside of the container is the page which is the green color. And then inside of div id page is div class menu, div id header, div id content box and then div id footer. Those are the main organizational elements of the Thesis page framework.
Inside of div id content box are those other things that we mentioned before. For example, there is div id content, then div class post box and then div class format text. And those are just increasingly nested elements inside of each of these containers. That’s how the basic page framework works.
Inheritance of Thesis Font Size and Color
Let’s take a look at a practical example of this. One of the things this page does is to break out all of the Thesis theme CSS elements and then tell you where they come from. And so, Thesis defines body as having a font size of 10 pixels and this is always the case. This is a fixed number and it comes hardcoded in style.css. And it gives it the color of black or 111 and that is the color that we set in Design Options and it exists in layout.css. So we could change the body color to other colors with Design Options.
This font size and color are going to be inherited all the way through the various children and you’re going to see how that works here in just a moment. So if we come over to our demonstration site and inspect our element, you can see that the text has a background color of black just as we saw before and it also has a font size of 10 pixels. Now look at the text in the middle of the page and inspect that element; you can see that there is different information about the text but the text color has not been specified. Scroll down here and you can see where the different elements of the text are in fact identified. The color for the format text comes from the body color.
Examples of Inheritance of Text Color in Thesis
For example, if we change the body color to red, that will change the color of the text inside of format text. And if we go back to our diagram, this body color works its way through each of these until it hits format text. Format text is inheriting this black color from post box which inherits it from content which inherits it from content box and so on and so forth all the way to the body. Now if we leave the boy color as black but we come in to page and give that a color of red, that red is going to work its way through to format text because now format text is inheriting from this parent.
Let’s change that body color back to black. And then if instead, we look at div id page and come over to page and add a new property of color and give it a color of red, we see that now, the text does in fact, become red even though our body color is still black. What Firebug is telling you here is that this body color has been superseded by a body color that is from a more specific or a closer parent. And if we inspect that text in format text, come up here to find the place where that color comes from, you’ll see that the color comes from page color red. The body color black has been superseded by page color red. Again if we add another color to format text and on div class format text made that color green, then it will take the color of its immediate parent and will become green instead.
So that’s how inheritance works. An element inherits its properties from its nearest parent and parents pass their properties down until that property is superseded by another generation of elements.
What can be Inherited?
So, what can be inherited? Before we answer that, the first thing to understand is that inheritance is based on the computed value and the most obvious example of the computed value in this case would be font size. You remember that in body, the font size is specified as being 10 pixels. But if we go over to our content and look at format text, you can see that it has been given a font size of 1.4 em which is essentially 1.4 times that font size of 10 pixels.
Now, if there was another HTML structure inside of format text that was given the font size of 1.4 em, it would be based on the computed font size which would be 1.4 times 10 pixels. That’s the computed size. And so, the new size would be 1.4 times, 14 pixels or about 19 ½ pixels. This is one of the reasons why when you’ve changed heading sizes or font sizes inside the footer or the sidebar you’ve discovered that 1.2 em font size is different in different places. The reason is because there is a parent element that has already specified an em style font size and so the computed value starts at a different location.
First, the value that you inherited is the computed value. Second, the kinds of things that you can inherit are things like font size, font weight or color, font alignment or font style. Those things can all be inherited. Things that can’t be inherited are things like padding and margin and width and background. Those are the sorts of things that stay with their element and aren’t passed on to their children elements.
Okay so that wraps up Part 1 of Lesson 6 of the Customize Thesis Like a Pro tutorial series.