1
00:00:00,640 --> 00:00:03,280
When you select an element
in the Elements panel,

2
00:00:03,280 --> 00:00:06,450
you can inspect the styles
applied to it in the Styles pane.

3
00:00:06,450 --> 00:00:09,860
The Styles pane provides a lot of
tools to help you with CSS debugging.

4
00:00:10,940 --> 00:00:14,340
In the Styles pane,
you're able to edit, add, and

5
00:00:14,340 --> 00:00:18,920
remove CSS properties and see the changes
immediately applied to the page.

6
00:00:18,920 --> 00:00:22,070
And like the elements panel,
changes you make aren't permanent.

7
00:00:22,070 --> 00:00:24,130
So they won't change
the code in your CSS file.

8
00:00:25,520 --> 00:00:28,970
In this video, I'll discuss three useful
features of the elements panel and

9
00:00:28,970 --> 00:00:30,080
styles pane.

10
00:00:30,080 --> 00:00:33,830
You'll learn how they list the CSS
rules applied to an element,

11
00:00:33,830 --> 00:00:35,970
add attributes to an element.

12
00:00:35,970 --> 00:00:38,820
And display exactly where
styles are being declared,

13
00:00:38,820 --> 00:00:42,650
and which properties are being
overridden by other properties.

14
00:00:42,650 --> 00:00:46,600
The Styles pane, not only lets you
inspect CSS properties, but also

15
00:00:46,600 --> 00:00:51,130
helps you understand how CSS rules are
applied by the browser, via the cascade.

16
00:00:51,130 --> 00:00:55,540
The cascade is what determines which
styles are assigned to an HTML element.

17
00:00:55,540 --> 00:00:58,668
If you're not sure about how the cascade
works, check out the teacher's notes for

18
00:00:58,668 --> 00:01:00,006
videos and courses that cover it.

19
00:01:03,335 --> 00:01:06,273
Select the submit button on this page, and

20
00:01:06,273 --> 00:01:10,830
the Styles pane shows the CSS
rules applied to the button.

21
00:01:10,830 --> 00:01:14,230
The rules are listed from
highest priority to lowest.

22
00:01:14,230 --> 00:01:19,200
Now, styles that are applied directly to
an element, using the style attribute,

23
00:01:19,200 --> 00:01:22,030
have the highest priority or
specificity in CSS.

24
00:01:22,030 --> 00:01:23,990
So at the top of the Styles pane,

25
00:01:23,990 --> 00:01:29,220
the element.style rule shows you any
inline CSS applied to the element.

26
00:01:29,220 --> 00:01:34,020
An inline CSS can be written directly
in an HTML tag or added by JavaScript.

27
00:01:36,739 --> 00:01:42,903
Right now, the rule is empty, so if I
right-click on the form submit button and

28
00:01:42,903 --> 00:01:47,870
select, Add Attribute,
I can add a style attribute.

29
00:01:47,870 --> 00:01:49,340
Set the color to red.

30
00:01:54,275 --> 00:01:58,313
And color red appears inside
the style element.style rule and

31
00:01:58,313 --> 00:02:00,150
the button color turns red.

32
00:02:05,293 --> 00:02:10,170
The inline color property we set has a
higher specificity than the color property

33
00:02:10,170 --> 00:02:13,280
originally applied in
the button submit rule.

34
00:02:13,280 --> 00:02:16,320
So notice that the property
is crossed out.

35
00:02:16,320 --> 00:02:20,980
CSS properties that have been overridden
by properties and other rules like this,

36
00:02:20,980 --> 00:02:23,187
are shown with strike-through text.

37
00:02:23,187 --> 00:02:25,468
Below the element.style rule,

38
00:02:25,468 --> 00:02:30,220
the Styles pane displays any CSS
rules that match the element.

39
00:02:30,220 --> 00:02:32,980
For example, the padding,
font size, background color, and

40
00:02:32,980 --> 00:02:36,540
border radius styles currently
being applied to the submit button

41
00:02:36,540 --> 00:02:41,810
are declared in the button submit
rule on line 56 of style.css.

42
00:02:41,810 --> 00:02:46,451
And below this rule, other properties
associated with this button like border,

43
00:02:46,451 --> 00:02:47,258
outline, and

44
00:02:47,258 --> 00:02:51,843
cursor properties are defined in separate
rules shared by all button elements.

45
00:02:51,843 --> 00:02:55,996
And the box sizing property below it is
also associated with the button element,

46
00:02:55,996 --> 00:03:00,332
since it's declared inside a rule using
the universal selector which matches every

47
00:03:00,332 --> 00:03:01,449
element on the page.

48
00:03:02,660 --> 00:03:05,360
And if you mouse over
a selector in the Styles pane,

49
00:03:05,360 --> 00:03:09,420
the browser highlights all elements
that are affected by that selector.

50
00:03:09,420 --> 00:03:10,340
So for example,

51
00:03:10,340 --> 00:03:16,040
placing my mouse over the button submit
rule highlights the submit button only.

52
00:03:16,040 --> 00:03:19,940
Hovering over button highlights
all the button elements and

53
00:03:19,940 --> 00:03:24,160
placing it over the universal rule
highlights every element and so on.

54
00:03:26,581 --> 00:03:32,052
Selecting the edit button inside
a guest list item, shows that,

55
00:03:32,052 --> 00:03:37,831
its styles are declared inside
the guest button rule on line 130.

56
00:03:37,831 --> 00:03:42,510
And below, we see the same base
styles applied to all buttons.

57
00:03:42,510 --> 00:03:43,980
Selecting the remove button,

58
00:03:43,980 --> 00:03:48,160
it also shows that the styles
are applied within guest button.

59
00:03:48,160 --> 00:03:51,510
But notice the CSS rule
that appears above it.

60
00:03:51,510 --> 00:03:57,110
The guest button last-child rule sets the
background color for the remove button.

61
00:03:57,110 --> 00:04:01,380
So it shows that it's overriding
the background color property set

62
00:04:01,380 --> 00:04:03,730
in guest button,
as you can see it's crossed out.

63
00:04:08,965 --> 00:04:12,530
Next, select one of the guest list items.

64
00:04:12,530 --> 00:04:15,460
And you'll notice that
two media query rules,

65
00:04:15,460 --> 00:04:19,020
appear above the initial guest rule.

66
00:04:19,020 --> 00:04:24,244
Well since my browser viewport is
currently wider than 769 pixel and

67
00:04:24,244 --> 00:04:27,390
880 pixel,
the styles are applied to the element and

68
00:04:27,390 --> 00:04:29,480
appear here in the Styles pane.

69
00:04:29,480 --> 00:04:33,932
And then as you'll see the flex-basis
value in the 769 pixel media query is

70
00:04:33,932 --> 00:04:38,722
being overridden by the value defined in
the widest media query breakpoint at 880

71
00:04:38,722 --> 00:04:39,560
pixels.

72
00:04:39,560 --> 00:04:41,230
So it's crossed out.

73
00:04:41,230 --> 00:04:46,200
Now when I resize the browser to
a viewport size narrower than 880 pixels,

74
00:04:46,200 --> 00:04:50,290
we no longer see the 880 pixel
media query in the Styles pane.

75
00:04:50,290 --> 00:04:52,960
We just see the one for 769 pixels.

76
00:04:52,960 --> 00:04:57,820
And if I shrink it to a width
narrower than 769 pixels,

77
00:04:57,820 --> 00:05:02,520
we see a new media query rule up here in
the Styles pane, the one styling the guest

78
00:05:02,520 --> 00:05:05,490
element at the smallest breakpoint
you'll find in the CSS.

79
00:05:06,541 --> 00:05:09,703
So these are features
you'll frequently use and

80
00:05:09,703 --> 00:05:12,560
the ones I use every day to debug CSS.

81
00:05:12,560 --> 00:05:16,680
In the next video, you'll learn other
parts of the Styles pane that let you know

82
00:05:16,680 --> 00:05:20,920
which properties of an element are being
inherited or pass down by other elements.

83
00:05:20,920 --> 00:05:24,250
As well as properties applied by
the browser's default style sheet or

84
00:05:24,250 --> 00:05:25,900
the user agent style sheet.