HTML and CSS work together to make the visual web that you see. They are responsible for 2 key parts,

HTML is the structure, much like the bricks, cement of a building. While CSS is the visuals that go on top like the paint colour and pictures on the wall.

Let’s start with a short example this a heading and paragraph

<h2>Heading level 2</h2> <p>Our first paragraph</p>

This will appear as probably just black text on your computer, we can add some flair with CSS, which are almost like spoken rules, so if we wanted to say “Let’s make every paragraph text colour red“ we could achieve this with:

p { color: red; }

We can dictate many visual features by adding more rules:

p { color: red; font-weight: bold; }

Let's say we had multiple paragraphs, we might want to differentiate one of them this is where we can use "classes", you add a class to HTML like so:

<h2>Heading level 2</h2> <p>Our first paragraph</p> <p>Our second paragraph</p> <p class="special">Our third paragraph</p> <p>Our fourth paragraph</p>

Then in CSS you can pick it up with a similar fashion to before but prefixed with a period.

.special { color: blue; }

At the moment we could add the special class to almost anything and it would make the text blue, but maybe we don't want that such as:

<h2>Heading level 2</h2> <p>Our first paragraph</p> <p>Our second paragraph</p> <h2 class="special">Heading level 2</h2> <p class="special">Our third paragraph</p> <p>Our fourth paragraph</p>

We might not want our h2's to be blue as well so we can target only specific HTML elements like so:

p.special { color: blue; } h2.special { color: purple; }

Now the "special" class acts differently depending on which element it's applied to.

Coming back to your example, we can break this up a little:

Create a style rule to apply the Border Box model Apply this to the div elements belonging to the following classes: container, row classes classes that begin with column, cell a elements nested within div elements belonging to the cell class.

Now we have 4 distinct tasks that we can build up to incrementally.

I think you have already figured out that the border box model is a property, this makes various elements behave in a slightly more sane way. i.e. the intuitive way you'd expect things to work is not what is default hence the need to correct into the border box model.

This property also needs to work across multiple browsers so you can start like so:

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Although here we've applied it to everything using the asterisk. Step 2 is to restrict this down a little bit, so the same way we restricted our special class to specific elements you'll need to do the same here.

Remember you can have multiple rules if you separate them with commas such as:

.class1, .class2 { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Part 3 is a little more vague but I think it means classes like column-1 or cellular, this brings us to an interesting feature of CSS, you can do some pretty basic regex-like operations in your css like so:

div[class^='startingwith'] { color: pink; }

Which would work for only the first 2 divs. Take note of the ^ character, in many applications this means "starting with", not just CSS.

<div class="startingwith-this">Hello world</div> <div class="startingwith-this-and-this">Hello world</div> <div class="not-startingwith-this">Hello world</div>

It's also worth noting that you can omit the word "div" and then this would apply to any element that has a class starting with the specified name.

The final part of your question is trying to show you how you don't just target things directly by calling a class, you can work out context and only apply styling when a particular structure of HTML has been followed, for example:

<div class="intro> <p>Main paragraph at the start</p> </div> <p>Other lesser paragraphs...</p> <p>Other lesser paragraphs...</p>

You can target the paragraph that is nested simply be separating rules with spaces:

.intro p { color: crimson; }

Now only the paragraph that is WITHIN .intro will be styled with crimson, you can apply this logic to do the same for anchor tags .