1
00:00:00,440 --> 00:00:04,510
It's time to dive into our CSS and our
external style sheet.

2
00:00:04,510 --> 00:00:08,900
We'll begin by breaking down the
organization of CSS, including comments,

3
00:00:08,900 --> 00:00:10,460
selectors, and syntax.

4
00:00:11,660 --> 00:00:15,860
In your external style sheet, you will
find it's been nicely organized with

5
00:00:15,860 --> 00:00:22,390
comments to help you identify which CSS
rules go with what HTML elements.

6
00:00:22,390 --> 00:00:28,320
These comments should look different than
what you've seen in HTML, like up here.

7
00:00:28,320 --> 00:00:31,710
Because in CSS, all it uses a forward
slash and

8
00:00:31,710 --> 00:00:36,840
a star to open the comment, and a star and
a forward slash to close the comment.

9
00:00:36,840 --> 00:00:41,610
In our first comment, you can see it says
Top Bar color here.

10
00:00:41,610 --> 00:00:45,420
When you look at it in the page, it's this
color here on top.

11
00:00:46,890 --> 00:00:52,890
Right now, it's only 20 pixels, but if I
change it to 100, save, and

12
00:00:52,890 --> 00:00:59,020
refresh the page, you can see it's a much
thicker bar across the top of our browser.

13
00:00:59,020 --> 00:01:01,880
This is a great time to point out the
structure of CSS.

14
00:01:02,890 --> 00:01:07,100
For all the basic selectors we are using,
it's very consistent.

15
00:01:07,100 --> 00:01:10,470
You have a [SOUND] selector, a [SOUND]
property and a [SOUND] value.

16
00:01:10,470 --> 00:01:14,166
[SOUND] Selectors select a part of the
HTML document so

17
00:01:14,166 --> 00:01:16,185
you can change how it looks.

18
00:01:16,185 --> 00:01:19,516
Inside the [SOUND] curly braces, you have
a property.

19
00:01:19,516 --> 00:01:22,830
This identifies what you want to change.

20
00:01:22,830 --> 00:01:25,220
And lastly, you have a [SOUND] value,

21
00:01:25,220 --> 00:01:28,932
which says how you want a particular
property to change.

22
00:01:28,932 --> 00:01:32,580
Let's add a new property to our HTML
selector.

23
00:01:32,580 --> 00:01:36,380
And we can start up here and change the
background.

24
00:01:36,380 --> 00:01:41,110
Let's say background and scroll down to
color.

25
00:01:41,110 --> 00:01:45,260
And let's change the whole thing to
orange.

26
00:01:45,260 --> 00:01:48,930
And save that out and refresh the page.

27
00:01:48,930 --> 00:01:50,400
And oh, man.

28
00:01:50,400 --> 00:01:52,220
That is terribly ugly.

29
00:01:52,220 --> 00:01:54,820
But it's just something you can try and
do.

30
00:01:54,820 --> 00:02:01,388
Before I'll go, I'll change it to, let's
say, lightblue.

31
00:02:01,388 --> 00:02:02,962
Save.

32
00:02:02,962 --> 00:02:04,263
Refresh.

33
00:02:04,263 --> 00:02:07,430
And that's a little better, but I think I
like the white better.

34
00:02:07,430 --> 00:02:12,700
Another thing you might want to try and
play around with is the margin in padding.

35
00:02:12,700 --> 00:02:15,810
Margin applies space outside of an
element.

36
00:02:15,810 --> 00:02:17,860
Padding works in a similar way,

37
00:02:17,860 --> 00:02:22,330
only padding applies space inside of an
element before the border.

38
00:02:22,330 --> 00:02:23,180
Using margins and

39
00:02:23,180 --> 00:02:26,800
padding are a great way of adding space
between elements on a webpage.

40
00:02:28,270 --> 00:02:32,130
Feel free to play with these values a bit
on your own and come back for

41
00:02:32,130 --> 00:02:36,090
a quick quiz before moving into colors and
fonts in the next video.