1
00:00:00,026 --> 00:00:04,654
[MUSIC]

2
00:00:04,654 --> 00:00:08,665
Hay everyone, Gill hear, it's time to
sharpen your CSS skills by practicing

3
00:00:08,665 --> 00:00:11,200
the fundamentals of CSS selectors.

4
00:00:11,200 --> 00:00:14,940
In this practice session, you are going
to write basic selectors to target and

5
00:00:14,940 --> 00:00:16,930
style different elements of a web page.

6
00:00:16,930 --> 00:00:19,670
To get started launch
the workspace with this video.

7
00:00:19,670 --> 00:00:22,420
When you preview the workspace,
you'll see that I've already

8
00:00:22,420 --> 00:00:25,540
included most of the base styles and
layout styles for the page.

9
00:00:25,540 --> 00:00:27,940
So now let's walk through
what you'll need to do.

10
00:00:27,940 --> 00:00:32,809
In the file selectors.css there are 8
comments with instructions on the type of

11
00:00:32,809 --> 00:00:34,896
selectors you'll need to write.

12
00:00:34,896 --> 00:00:39,917
For example, the first comment wants you
to change the color of all list items

13
00:00:39,917 --> 00:00:44,718
inside an unordered list, and
you can use any color you'd like for this.

14
00:00:44,718 --> 00:00:49,014
Below the second comment,
you'll need to write two selectors,

15
00:00:49,014 --> 00:00:53,466
one that removes the text decoration
from navigation links only and

16
00:00:53,466 --> 00:00:57,960
another that changes a nav
links text color when hovered.

17
00:00:57,960 --> 00:01:00,380
Again, you can set the text
to whatever color you like.

18
00:01:01,740 --> 00:01:04,560
Then you're going to create hover and

19
00:01:04,560 --> 00:01:09,040
visited styles for
all links inside the main element.

20
00:01:09,040 --> 00:01:13,200
For example, you can remove
the text decoration on hover and

21
00:01:13,200 --> 00:01:15,970
change a links color,
once it's been visited.

22
00:01:17,340 --> 00:01:24,259
After that, you'll change the background
color of the submit button only when

23
00:01:24,259 --> 00:01:29,745
it's active then give the text
field a blue border upon focus.

24
00:01:32,775 --> 00:01:37,860
For the next two selectors, you're going
to apply classes and ids to the HTML.

25
00:01:37,860 --> 00:01:39,090
So, for example,

26
00:01:39,090 --> 00:01:44,780
the next comment asks you to give the span
tag in the footer a meaningful class name.

27
00:01:44,780 --> 00:01:47,876
Then select it in the style sheet and
reduce its font size.

28
00:01:50,591 --> 00:01:55,175
And you'll also give the image
tag in the header an id,

29
00:01:55,175 --> 00:01:59,170
selected, and set its width to 100 pixels.

30
00:02:01,380 --> 00:02:05,490
Finally, you're going to target
all heading tags on the page and

31
00:02:05,490 --> 00:02:09,180
set their font family to the font
stack provided in the comment.

32
00:02:10,420 --> 00:02:13,680
When you're finished,
your page should look similar to this.

33
00:02:13,680 --> 00:02:16,978
This exercise is a great way to
practice what you've learned so

34
00:02:16,978 --> 00:02:18,355
far about CSS selectors.

35
00:02:18,355 --> 00:02:20,395
So good luck, have fun,
and in the next video,

36
00:02:20,395 --> 00:02:22,030
I will walk you through the solution.