While CSS syntax is relatively simple,
the styles themselves, and the pages that they control, can get rather complex.
As size become larger and more complex, it becomes more difficult to keep styles
from conflicting with one another.
This can lead to bloated code, inefficient CSS, or styles that simply just don't work.
In order to confidently navigate more complex page structure, you need to
understand how browsers apply styles.
Once you understand the rules of style rendering, it becomes much easier to
write organized and efficient CSS.
First, I want to take a look at how browsers read selectors.
You and I are probably used to reading selectors from left to right.
Now, take the following selector.
This tells the browser to find any text within a span tag, which is also inside
of a paragraph tag, which is also found within div tag, which is also found
within an element with an ID of mainContent.
Now the browser, however, reads this from right to left. In this case, the
browser would first find all of the span tags within the page.
It would then check to see if they were inside of a paragraph.
Next, it would scan through the content again to see if any of those paragraphs are within a div.
After filtering those results, it would finally check to see if the remaining
elements were inside an element with an ID of mainContent.
Now as you can imagine, this is not a very efficient selector.
In cases like these, you should ask yourself if a simplified version of the
selector would work.
In some cases, you're going to need this type of a detailed selector, but where
you can simplify, you should.
Next, I want to examine the concept of the cascade.
Cascading style sheets derive their name from the cascading order of styles as
they're applied within the browser.
And this usually means that external styles are applied first, followed by
embedded styles, and finally followed by inline styles, if they're applied
within the document.
Now if any of these styles conflict with each other, the most recent set of
styles will overwrite the earlier styles.
Now, notice that I said this is how it usually works;
that because the cascade can really be summed up in one sentence:
the last rule applied wins. Styles are applied in the order that they're found,
and recent styles always overwrite earlier styles in the event of a conflict.
Take this example. Since the external style sheet link appears after the
embedded styles, the external styles would actually overwrite any of the
conflicting embedded styles.
This method even applies to style sheets themselves.
Take a look at the style sheet.
Notice that it contains two paragraph selectors. Of the two, the last selector
would be the one that's applied, as it's the last rule applied.
Remember, no matter where the styles are found, the last rule applied wins.
Next, I want to talk about inheritance.
Inheritance allows us to write very efficient styles, but it can get us in
trouble if we don't remember exactly how our styles are structured.
Inheritance essentially says that child elements will inherit the properties
applied to a parent.
Take this very common rule, for example. Here a body selector has a font,
font-size, and color applied to it.
In this case, every element on the page would render as Arial, 100% of its
default size, and be gray.
All the headings, list, and paragraphs are inheriting those values from the body selector.
You can reverse this, however. I f I wanted all my main headings to be
Garnet, for example, I could simply write a rule for that h1 and set the color to Garnet.
Child rules will always overwrite their parent rules where there is a conflict.
Now understanding inheritance makes it much easier to write efficient styles.
Imagine writing separate rules for every element on the page to define a font and a color.
Now writing that for the body selector and letting all those other elements
inherit it is a lot more efficient.
One more thing about inheritance: not all properties will inherit.
Now, for the most part, it's pretty logical, but there really isn't any way to tell
what inherits without digging into the specifications or just memorizing it.
I promise, it's not that hard to keep track of what it inherits and what doesn't.
The last concept I want to talk about is specificity.
Specificity is just a fancy way to describe how specific a rule is.
Basically, if the cascade or inheritance can't resolve a conflict, the
more specific rule wins.
Each rule has a weight score based on the elements that make up the selector.
This table explains it in a little bit more detail.
IDs are worth 100 points, classes are worth 10, and elements are worth 1.
Using this chart, it's pretty easy to determine which rule is going to win in
the event of a conflict.
There is one final point I want to make about browser rendering: styles are cumulative.
Take these styles, for example.
Here we have a body selector and an external style sheet that applies the font,
font-size, and color.
Later on in the same style sheet, there is a paragraph rule that sets
the line-height to 2.
Finally, in the HTML document there is an embedded style that changes the color
of the paragraphs to black.
So what would the final style of all this paragraphs be?
Well, it would inherit the font and font-size from the body selector.
The line-height would come from the paragraph rule in the external style sheet.
And finally, the color would be overwritten by the embedded style, as
inheritance would resolve the conflict between the embedded paragraph style and
the external body style.
Okay, I know I just threw a lot at you in a short amount of time, but hey,
that's the beauty of video.
You can pause, take notes, and rewind.
If you understand how browsers render styles and how the cascade, inheritance,
and specificity work, you'll be able to write clean efficient styles that are
smaller in size and much easier to update.
So as you learn CSS and begin working with it, keep these concepts in mind and
you're going to save yourself a lot of time and a lot of trouble.