1

00:00:00.05 --> 00:00:02.03

- [Instructor] Before we talk about CSS,

2
00:00:02.03 --> 00:00:05.00
I want to show you a useful browser feature.

3
00:00:05.00 --> 00:00:07.09
It's okay if you're not familiar with any CSS yet,

4
00:00:07.09 --> 00:00:11.04
but we'll be using this tool throughout the course.

5
00:00:11.04 --> 00:00:12.08
Every modern browser includes

6
00:00:12.08 --> 00:00:14.06
a set of browser developer tools,

7
00:00:14.06 --> 00:00:16.08
which can be used to inspect the HTML,

8
00:00:16.08 --> 00:00:20.00
CSS and JavaScript on any webpage.

9
00:00:20.00 --> 00:00:22.07
That's right, you can inspect not only your own projects,

10
00:00:22.07 --> 00:00:26.03
but also any other website, right in your browser.

11
00:00:26.03 --> 00:00:27.08
But opening the tool for the first time,

12
00:00:27.08 --> 00:00:29.06
can be a little daunting.

13
00:00:29.06 --> 00:00:30.09
There's so much to look at.

14
00:00:30.09 --> 00:00:33.01
So I've created a basic HTML page

15
00:00:33.01 --> 00:00:36.01
with only one CSS style, just to make this demo
16
00:00:36.01 --> 00:00:38.00
a bit more straightforward.

17
00:00:38.00 --> 00:00:41.04
To follow along, open the example.HTML file,

18
00:00:41.04 --> 00:00:44.03
located in the chapter one 0102 folder,

19
00:00:44.03 --> 00:00:46.05
in the exercise files.

20
00:00:46.05 --> 00:00:48.06
Right now I have this page open in Chrome,

21
00:00:48.06 --> 00:00:50.02
but I'll also show the Dev tools

22
00:00:50.02 --> 00:00:52.06
in Safari and Firefox as well.

23
00:00:52.06 --> 00:00:55.00
Developer tools may vary among browsers

24
00:00:55.00 --> 00:00:57.00
but mostly function in the same way.

25
00:00:57.00 --> 00:00:58.08
You can access them a few different ways,

26
00:00:58.08 --> 00:01:01.04
but the most consistent way across browsers

27
00:01:01.04 --> 00:01:03.04
is to right click anywhere on the page,

28
00:01:03.04 --> 00:01:05.08
or two finger tap if you're using Track Pad,

29
00:01:05.08 --> 00:01:09.04
and select inspect or inspect element.

30
00:01:09.04 --> 00:01:11.04
The HTML will appear on the left,

31
00:01:11.04 --> 00:01:14.09
and the CSS will appear on the right.

32
00:01:14.09 --> 00:01:16.00
If you're using Safari,

33
00:01:16.00 --> 00:01:17.09
you may have to update your settings.

34
00:01:17.09 --> 00:01:21.03
Go to preferences, advanced,

35
00:01:21.03 --> 00:01:24.08
and select the show develop menu in menu bar.

36
00:01:24.08 --> 00:01:26.09
Once this is checked, you'll notice that develop

37
00:01:26.09 --> 00:01:28.09
has been added to the menu.

38
00:01:28.09 --> 00:01:33.01
And now you can access the Dev tools.

39
00:01:33.01 --> 00:01:35.00
In Safari, you may have to select

40
00:01:35.00 --> 00:01:38.07
this icon on the right side to open the CSS panel.

41
00:01:38.07 --> 00:01:41.03
But just like Chrome, the HTML is on the left,

42
00:01:41.03 --> 00:01:43.08
CSS is on the right.

43
00:01:43.08 --> 00:01:47.04
In Safari and Chrome, the default styles are listed under,

44
00:01:47.04 --> 00:01:50.00
User Agent Style Sheet.

45
00:01:50.00 --> 00:01:53.03
This refers to the browsers style sheet.

46
00:01:53.03 --> 00:01:56.06
The one custom style I added was to this H One Heading.

47
00:01:56.06 --> 00:01:59.08
We can see color green listed under example.HTML.

48
00:01:59.08 --> 00:02:03.05
Which refers to the file name where the CSS is located.

49
00:02:03.05 --> 00:02:05.08
The Dev tools in Firefox is a little bit different,

50
00:02:05.08 --> 00:02:08.06
but you can access it in the same way.

51
00:02:08.06 --> 00:02:11.03
The HTML displays on the left, but the default styles

52
00:02:11.03 --> 00:02:15.04
displays in this third panel under layout.

53
00:02:15.04 --> 00:02:18.04
The custom CSS is shown in this middle panel.

54
00:02:18.04 --> 00:02:21.00
You can also select this arrow icon,

55
00:02:21.00 --> 00:02:23.05
to collapse these two panels together.

56
00:02:23.05 --> 00:02:27.07
Rules for the custom CSS and layout for the default.

57
00:02:27.07 --> 00:02:30.03
Also notice that instead of showing that the custom CSS

58
00:02:30.03 --> 00:02:33.01
is located in the example.HTML file,

59
00:02:33.01 --> 00:02:34.04
it just says in line,
60
00:02:34.04 --> 00:02:36.08
which means that the CSS is in the same file

61
00:02:36.08 --> 00:02:38.05
as the HTML file.

62
00:02:38.05 --> 00:02:40.09
We'll be taking more about where CSS can be added

63
00:02:40.09 --> 00:02:42.09
in an upcoming lesson.

64
00:02:42.09 --> 00:02:44.05
I'm currently on a Mac, so I can't show

65
00:02:44.05 --> 00:02:46.08
what the developer tools look like in Edge,

66
00:02:46.08 --> 00:02:50.02
but it should function similarly to what you've seen here.

67
00:02:50.02 --> 00:02:52.08
While developer tools are great for improving your workflow

68
00:02:52.08 --> 00:02:54.09
and fixing bugs, don't worry too much about learning

69
00:02:54.09 --> 00:02:56.07
all the ins and outs just yet.

70
00:02:56.07 --> 00:02:58.05
I'll touch on how to use developer tools

71
00:02:58.05 --> 00:03:00.02
throughout this course, but the main focus

72
00:03:00.02 --> 00:03:03.03
will be on getting started with the fundamentals of CSS.

73
00:03:03.03 --> 00:03:05.02
But if you'd like some more information

74
00:03:05.02 --> 00:03:07.06
about developer tools, check out this article
75
00:03:07.06 --> 00:03:10.09
from the Mozilla Developer Network, or MDN for short.