1
00:00:00,000 --> 00:00:02,990
While CSS syntax is relatively simple,

2
00:00:03,000 --> 00:00:07,990
the styles themselves, and the pages that they control, can get rather complex.

3
00:00:08,000 --> 00:00:11,990
As size become larger and more complex, it becomes more difficult to keep styles

4
00:00:12,000 --> 00:00:13,990
from conflicting with one another.

5
00:00:14,000 --> 00:00:20,990
This can lead to bloated code, inefficient CSS, or styles that simply just don't work.

6
00:00:21,000 --> 00:00:24,990
In order to confidently navigate more complex page structure, you need to

7
00:00:25,000 --> 00:00:26,990
understand how browsers apply styles.

8
00:00:27,000 --> 00:00:31,990
Once you understand the rules of style rendering, it becomes much easier to

9
00:00:32,000 --> 00:00:34,990
write organized and efficient CSS.

10
00:00:35,000 --> 00:00:37,990
First, I want to take a look at how browsers read selectors.

11
00:00:38,000 --> 00:00:41,990
You and I are probably used to reading selectors from left to right.

12
00:00:42,000 --> 00:00:43,990
Now, take the following selector.

13
00:00:44,000 --> 00:00:49,990
This tells the browser to find any text within a span tag, which is also inside

14
00:00:50,000 --> 00:00:53,990
of a paragraph tag, which is also found within div tag, which is also found

15
00:00:54,000 --> 00:00:57,990
within an element with an ID of mainContent.

16
00:00:58,000 --> 00:01:02,990
Now the browser, however, reads this from right to left. In this case, the

17
00:01:03,000 --> 00:01:07,990
browser would first find all of the span tags within the page.

18
00:01:08,000 --> 00:01:11,990
It would then check to see if they were inside of a paragraph.

19
00:01:12,000 --> 00:01:16,990
Next, it would scan through the content again to see if any of those paragraphs are within a div.

20
00:01:17,000 --> 00:01:20,990
After filtering those results, it would finally check to see if the remaining

21
00:01:21,000 --> 00:01:23,990
elements were inside an element with an ID of mainContent.

22
00:01:24,000 --> 00:01:28,990
Now as you can imagine, this is not a very efficient selector.

23
00:01:29,000 --> 00:01:33,990
In cases like these, you should ask yourself if a simplified version of the

24
00:01:34,000 --> 00:01:34,990
selector would work.

25
00:01:35,000 --> 00:01:38,990
In some cases, you're going to need this type of a detailed selector, but where

26
00:01:39,000 --> 00:01:41,990
you can simplify, you should.

27
00:01:42,000 --> 00:01:45,990
Next, I want to examine the concept of the cascade.

28
00:01:46,000 --> 00:01:50,990
Cascading style sheets derive their name from the cascading order of styles as

29
00:01:51,000 --> 00:01:51,990
they're applied within the browser.

30
00:01:52,000 --> 00:01:55,990
And this usually means that external styles are applied first, followed by

31
00:01:56,000 --> 00:01:59,990
embedded styles, and finally followed by inline styles, if they're applied

32
00:02:00,000 --> 00:02:01,990
within the document.

33
00:02:02,000 --> 00:02:04,990
Now if any of these styles conflict with each other, the most recent set of

34
00:02:05,000 --> 00:02:07,990
styles will overwrite the earlier styles.

35
00:02:08,000 --> 00:02:10,990
Now, notice that I said this is how it usually works;

36
00:02:11,000 --> 00:02:14,990
that because the cascade can really be summed up in one sentence:

37
00:02:15,000 --> 00:02:19,990
the last rule applied wins. Styles are applied in the order that they're found,

38
00:02:20,000 --> 00:02:24,990
and recent styles always overwrite earlier styles in the event of a conflict.

39
00:02:25,000 --> 00:02:29,990
Take this example. Since the external style sheet link appears after the

40
00:02:30,000 --> 00:02:33,990
embedded styles, the external styles would actually overwrite any of the

41
00:02:34,000 --> 00:02:35,990
conflicting embedded styles.

42
00:02:36,000 --> 00:02:38,990
This method even applies to style sheets themselves.

43
00:02:39,000 --> 00:02:41,990
Take a look at the style sheet.

44
00:02:42,000 --> 00:02:46,990
Notice that it contains two paragraph selectors. Of the two, the last selector

45
00:02:47,000 --> 00:02:49,990
would be the one that's applied, as it's the last rule applied.

46
00:02:50,000 --> 00:02:54,990
Remember, no matter where the styles are found, the last rule applied wins.

47
00:02:55,000 --> 00:02:57,990
Next, I want to talk about inheritance.

48
00:02:58,000 --> 00:03:00,990
Inheritance allows us to write very efficient styles, but it can get us in

49
00:03:01,000 --> 00:03:04,990
trouble if we don't remember exactly how our styles are structured.

50
00:03:05,000 --> 00:03:08,990
Inheritance essentially says that child elements will inherit the properties

51
00:03:09,000 --> 00:03:10,990
applied to a parent.

52
00:03:11,000 --> 00:03:15,990
Take this very common rule, for example. Here a body selector has a font,

53
00:03:16,000 --> 00:03:18,990
font-size, and color applied to it.

54
00:03:19,000 --> 00:03:22,990
In this case, every element on the page would render as Arial, 100% of its

55
00:03:23,000 --> 00:03:25,990
default size, and be gray.

56
00:03:26,000 --> 00:03:30,990
All the headings, list, and paragraphs are inheriting those values from the body selector.

57
00:03:31,000 --> 00:03:33,990
You can reverse this, however. I f I wanted all my main headings to be

58
00:03:34,000 --> 00:03:40,990
Garnet, for example, I could simply write a rule for that h1 and set the color to Garnet.

59
00:03:41,000 --> 00:03:43,990
Child rules will always overwrite their parent rules where there is a conflict.

60
00:03:44,000 --> 00:03:48,990
Now understanding inheritance makes it much easier to write efficient styles.

61
00:03:49,000 --> 00:03:53,990
Imagine writing separate rules for every element on the page to define a font and a color.

62
00:03:54,000 --> 00:03:57,990
Now writing that for the body selector and letting all those other elements

63
00:03:58,000 --> 00:03:59,990
inherit it is a lot more efficient.

64
00:04:00,000 --> 00:04:03,990
One more thing about inheritance: not all properties will inherit.

65
00:04:04,000 --> 00:04:07,990
Now, for the most part, it's pretty logical, but there really isn't any way to tell

66
00:04:08,000 --> 00:04:11,990
what inherits without digging into the specifications or just memorizing it.

67
00:04:12,000 --> 00:04:16,990
I promise, it's not that hard to keep track of what it inherits and what doesn't.

68
00:04:17,000 --> 00:04:19,990
The last concept I want to talk about is specificity.

69
00:04:20,000 --> 00:04:24,990
Specificity is just a fancy way to describe how specific a rule is.

70
00:04:25,000 --> 00:04:28,990
Basically, if the cascade or inheritance can't resolve a conflict, the

71
00:04:29,000 --> 00:04:30,990
more specific rule wins.

72
00:04:31,000 --> 00:04:35,990
Each rule has a weight score based on the elements that make up the selector.

73
00:04:36,000 --> 00:04:38,990
This table explains it in a little bit more detail.

74
00:04:39,000 --> 00:04:43,990
IDs are worth 100 points, classes are worth 10, and elements are worth 1.

75
00:04:44,000 --> 00:04:47,990
Using this chart, it's pretty easy to determine which rule is going to win in

76
00:04:48,000 --> 00:04:49,990
the event of a conflict.

77
00:04:50,000 --> 00:04:55,990
There is one final point I want to make about browser rendering: styles are cumulative.

78
00:04:56,000 --> 00:04:56,990
Take these styles, for example.

79
00:04:57,000 --> 00:05:01,990
Here we have a body selector and an external style sheet that applies the font,

80
00:05:02,000 --> 00:05:03,990
font-size, and color.

81
00:05:04,000 --> 00:05:06,990
Later on in the same style sheet, there is a paragraph rule that sets

82
00:05:07,000 --> 00:05:08,990
the line-height to 2.

83
00:05:09,000 --> 00:05:13,990
Finally, in the HTML document there is an embedded style that changes the color

84
00:05:14,000 --> 00:05:15,990
of the paragraphs to black.

85
00:05:16,000 --> 00:05:18,990
So what would the final style of all this paragraphs be?

86
00:05:19,000 --> 00:05:23,990
Well, it would inherit the font and font-size from the body selector.

87
00:05:24,000 --> 00:05:27,990
The line-height would come from the paragraph rule in the external style sheet.

88
00:05:28,000 --> 00:05:31,990
And finally, the color would be overwritten by the embedded style, as

89
00:05:32,000 --> 00:05:35,990
inheritance would resolve the conflict between the embedded paragraph style and

90
00:05:36,000 --> 00:05:37,990
the external body style.

91
00:05:38,000 --> 00:05:40,990
Okay, I know I just threw a lot at you in a short amount of time, but hey,

92
00:05:41,000 --> 00:05:42,990
that's the beauty of video.

93
00:05:43,000 --> 00:05:44,990
You can pause, take notes, and rewind.

94
00:05:45,000 --> 00:05:49,990
If you understand how browsers render styles and how the cascade, inheritance,

95
00:05:50,000 --> 00:05:53,990
and specificity work, you'll be able to write clean efficient styles that are

96
00:05:54,000 --> 00:05:56,990
smaller in size and much easier to update.

97
00:05:57,000 --> 00:06:01,990
So as you learn CSS and begin working with it, keep these concepts in mind and

98
00:06:02,000 --> 00:06:12,000
you're going to save yourself a lot of time and a lot of trouble.