- While CSS syntax is relatively simple,
the styles themselves, and the pages
that they control, can get rather complex.
As sites 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 wanna 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 a div tag, which is
also found within an element with
an ID of main content.
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 any of those paragraphs
are within a div.
After filtering those results, it would
finally check to see if the remaining
elements were inside of an element
with an ID of main content.
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 gonna need this
type of a detailed selector, but where
you can simplify, you should.
Next, I wanna 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's 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 this 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 wanna 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 grey.
All the headings, lists, and paragraphs
are inheriting those values from the
body selector.
You can reverse this, however.
If 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's 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 of 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 inherits and what doesn't.
The last concept I wanna 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 one.
Using this chart, it's pretty easy to
determine which rule is gonna win in
the event of a conflict.
There's one final point I wanna 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's a paragraph rule that sets
the line height to two.
Finally, in the HTML document,
there's an embedded style that changes
the color of the paragraphs to black.
So, what would the final style of
all of these 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
gonna save yourself a lot of time
and a lot of trouble.