1
00:00:00,868 --> 00:00:06,838
Just like in HTML, we can write 
comments in CSS to add explanatory

2
00:00:06,838 --> 00:00:12,156
notes or prevent the browser from 
interpreting parts of the stylesheet.

3
00:00:12,156 --> 00:00:17,059
CSS comments are useful for
including helpful notes and

4
00:00:17,059 --> 00:00:21,551
hints that let us know
what's going on in our code.

5
00:00:21,551 --> 00:00:26,404
Comments in CSS begin
with a forward slash and

6
00:00:26,404 --> 00:00:32,160
asterisk and end with an 
asterisk and forward slash.

7
00:00:32,160 --> 00:00:34,272
Everything that's in
between those opening and

8
00:00:34,272 --> 00:00:39,300
closing characters is
ignored by the browser.

9
00:00:39,300 --> 00:00:42,347
For instance above our 
type selectors, we can

10
00:00:42,347 --> 00:00:47,375
include a comment that reminds 
us these are type selectors.

11
00:00:49,462 --> 00:00:52,714
And we can do the same for
our ID selectors.

12
00:00:56,444 --> 00:00:58,683
And our class selectors.

13
00:01:05,628 --> 00:01:09,745
When using CSS comments, we 
need to be careful where we 

14
00:01:09,745 --> 00:01:11,410
start and end the comment.

15
00:01:11,410 --> 00:01:15,746
For example, if we accidentally
leave out the closing asterisk,

16
00:01:18,366 --> 00:01:25,120
or closing slash, or put them 
in the wrong order,

17
00:01:25,120 --> 00:01:29,338
it also comments out the 
CSS rules below.

18
00:01:33,738 --> 00:01:39,498
Another way we can use comments 
is to write ourselves notes in our CSS.

19
00:01:39,498 --> 00:01:44,493
These are really helpful when
learning new things about CSS.

20
00:01:44,493 --> 00:01:48,244
We can use comments to indicate
what certain things do.

21
00:01:48,244 --> 00:01:54,656
For example, we used a pseudo-
class called :focus to make it

22
00:01:54,656 --> 00:01:58,903
obvious when the user tabs to one
of our links using the keyboard.

23
00:01:58,903 --> 00:02:02,355
But, what if we have trouble
remembering what that does later?

24
00:02:14,809 --> 00:02:17,419
The browser will ignore 
this comment.

25
00:02:17,419 --> 00:02:21,779
We can also comment 
out parts of our code,

26
00:02:21,779 --> 00:02:26,523
mostly for testing 
purposes and debugging.

27
00:02:26,523 --> 00:02:31,675
In our last video, we used a 
pseudo-class called :first-child

28
00:02:31,675 --> 00:02:35,747
to make the first item in our 
ordered lists bold. If we wanted

29
00:02:35,747 --> 00:02:42,162
to temporarily disable that CSS rule, 
we could do so with a comment.

30
00:02:46,094 --> 00:02:50,789
When we see the block of code turn 
gray, that means it's commented out.

31
00:02:50,789 --> 00:02:55,748
And the first item in our ordered
list should no longer be bold.

32
00:03:00,620 --> 00:03:06,423
Most text editors have a shortcut for
creating or removing comments.

33
00:03:06,423 --> 00:03:10,308
In workspaces and in most editors,

34
00:03:10,308 --> 00:03:16,920
the shortcut is command + / on a 
Mac or Ctrl + / on windows.

35
00:03:16,920 --> 00:03:22,214
For example if we select the rule
targeting the :first-child

36
00:03:22,214 --> 00:03:27,299
pseudo-class for our list items 
within the ordered lists,

37
00:03:27,299 --> 00:03:32,718
then hit command + /, the 
comment characters are removed.

38
00:03:32,718 --> 00:03:37,452
Press the key command again and
the comment is restored.

39
00:03:41,003 --> 00:03:46,108
Let's quickly review some of what 
we've learned so far about CSS selectors.

40
00:03:46,108 --> 00:03:52,467
A type selector is what we use to
select the type of element on the page.

41
00:03:52,467 --> 00:03:56,342
We use the name of an HTML
element as the selector.

42
00:03:56,342 --> 00:04:04,403
ID selectors target HTML elements 
that have a particular ID applied to them.

43
00:04:04,403 --> 00:04:08,654
IDs in our HTML are not reusable.

44
00:04:08,654 --> 00:04:11,850
An element can have 
only one ID and

45
00:04:11,850 --> 00:04:15,198
a page can have only one
element with the same ID name.

46
00:04:16,998 --> 00:04:21,235
Class selectors can be reused
anywhere in the HTML and

47
00:04:21,235 --> 00:04:24,449
an element can have more 
than one class.

48
00:04:24,449 --> 00:04:27,335
It's good practice to 
give classes and

49
00:04:27,335 --> 00:04:31,102
IDs meaningful names that
explain their purpose.

50
00:04:31,102 --> 00:04:36,052
We can also create descendant
selectors to target elements

51
00:04:36,052 --> 00:04:39,520
that are descendants
of other elements.

52
00:04:39,520 --> 00:04:43,547
And we can use pseudo-classes
to style elements based on 

53
00:04:43,547 --> 00:04:48,209
user interaction, like targeting 
:hover or :focus states.

54
00:04:48,209 --> 00:04:54,345
So far in the course, we've used 
CSS properties and values to

55
00:04:54,345 --> 00:04:57,238
style the elements we selected
without really examining what 

56
00:04:57,238 --> 00:05:02,690
they do. We'll learn more about 
those properties and values next.