Exercise
We’ve learned a lot in this section already so you’re now well on your way to understanding all you need to know about CSS. It’s a good time to put your skills to the test and set up our environment for the subsequent sections where we will be exploring a few of the CSS properties that we will be using when building our website later on in this book.
So let’s start by creating the link required for this. We’re going to need a global css file that will be used on all of our webpages, so start by creating a file named main.css that exists inside a folder called ‘styles’ in our root directory; link this css file to our existing webpages. Then, inside the css file, set the colour of all <h1> tags to blue. We have covered how to do this already – just read back through the sections if you get stuck.
Core concepts
While the syntax of CSS is nice and simple, there are a few areas of CSS that can get a little bit more challenging to understand, but don’t worry, we will break them down now and by the end of this section you will have a firm grasp on these concepts, and you will be well on your way to mastering CSS. We will be styling those webpages you created in the last chapter in no time at all.
Inheritance
Let’s start with a conversion around a core principle of CSS, inheritance. While the term itself might seem like this concept is going to be a confusing and advanced principle, it’s actually relatively simple. To understand it, we first need to understand a bit more about how a webpage is rendered. As we saw already when we were building the HTML for our webpage, everything inside a webpage is nested within another element; for example, the <script> tag is nested inside the <head> tag, which is nested within the <html> tag along with the rest of the website. Well, this structure is hugely important to how our webpage, and our CSS operates.
When our created webpage is loaded by a browser, the browser analysesthe HTML and creates an ‘object’ based on your HTML structure. This iscalled the DOM (document object model), you can think of the DOM as areverse tree-like structural representation of your webpage, where elementscan have parents, children and siblings. See Figure 4.2 below for referenc of a visual example of a DOM structure.
4.2 
Now if you analyse this tree structure, you will see how <body> is a ‘child’ of <html>, and <body> is also a parent of all of your actual document, which contains a lot of siblings, which have children of their own, etc. This orderly approach of nested elements allows us to make use of inheritance in CSS.
Inheritance works just like it does in real life. A child can inherit attributes from its parent and share some attributes with its siblings. In HTML, it’s important to note that an element will only ever have one parent. But the principle remains the same.
Let’s look at an example. If I applied a style to the <body> element, every child of the <body> element would also receive the style. So if I gave the body a property of colour – green – all of the text in the children elements would also be green, unless this is overridden (more on that later). There are some styles that don’t get passed down in the same way as the colour property does, such as the border property. Welcome to the world of CSS. There are many of these small quirks that you will become accustomed to over time. In any case, the simple concept of a parent sharing its attributes with its children elements is the principle of inheritance. See, that wasn’t so bad was it?
Nesting
Following on from our discussion around inheritance, let’s quickly assess the possibilities this opens up for how we target attributes with CSS.
In CSS you can nest your selectors in order to finely choose which element to select. Let’s take the document structure in Figure 4.3 as an example.
4.3 
You will notice we have eight divs with the class ‘textbox’ in Figure 4.3, four of which have a parent with an id ‘left-box’ and four with a parent with the id ‘right-box’. Let’s say we only want to apply styles to the divs with the class ‘textbox’ that sit within the ‘left-box’ div, well with CSS we can do that. We simply nest the elements in the selector like so: