HTML defines content, CSS decorates it and helps tell how it is displayed.

CSS stands for Cascading Stylesheet. This means that there is a hierarchy of style attributes overwriting other attributes that affect the same elements.

Think of it like this. Bob Ross does an oil painting and starts off with a canvas covered in liquid white. This is the lowest level on the hierarchy. It applies to the entire body of the painting, like a class applied to the body tag.

On that he paints some divs of class "mountain". The mountain class has the attribute paint-color:Van Dyke Brown. Since the div is within body the paint-color:Van Dyke Brown attribute overwrites the liquid white and you see the Van Dyke Brown over the liquid white.

He adds some divs of class "happy little tree" which are growing wherever they like, which happens to be on the mountains, so these happy little tree divs are within the mountain divs. Their paint-color:Sap Green is within the mountain div, so where the happy little tree divs are is painted with Sap Green on top of the Van Dyke Brown mountains.

Then Bob adds another happy little tree div. This one he wants to be Alizarin Crimson because its his world and it can be whatever fucking color he god damn pleases. Rather than giving it a special id and using the # selector Bob makes the happy little accident of using an inline style. This overwrites the happy little tree class's paint-color:Sap Green attribute with an inline paint-color:Alizarin Crimson because inline styles cascade over classes.

Probably less common than selecting by id or class, but useful nontheless.

There's a thing in CSS called "class-itis", which is a tendency of novices to put a class in every element and use them as selectors. The aim is to be selective enough, but if you over-use classes they become quite difficult to maintain.

Consider this

<div class="container">
     <span>Heading</span>
    <div>
        <span>Hello world</span>
    </div>
</div>

If we just did .container span { font-size : 20px; } it'd set the Hello World to be 20px as well as the heading. One solution might be to add in a "container-body" class on the nested div, but by using a specific descendant selector like .container > spanwe can limit the effect to just the heading and avoid the need for a second class whose job it is just to undo the effect of the more general rule.