Preview
Video Player
00:00
00:00
Let's Practice Selectors!
2:24CSS selectors allow you to target HTML elements and apply styles to them. This exercise is a great way to sharpen your CSS skills and practice what you've learned about CSS selectors.
[MUSIC]
0:00
Hay everyone, Gill hear, it's time to
sharpen your CSS skills by practicing
0:04
the fundamentals of CSS selectors.
0:08
In this practice session, you are going
to write basic selectors to target and
0:11
style different elements of a web page.
0:14
To get started launch
the workspace with this video.
0:16
When you preview the workspace,
you'll see that I've already
0:19
included most of the base styles and
layout styles for the page.
0:22
So now let's walk through
what you'll need to do.
0:25
In the file selectors.css there are 8
comments with instructions on the type of
0:27
selectors you'll need to write.
0:32
For example, the first comment wants you
to change the color of all list items
0:34
inside an unordered list, and
you can use any color you'd like for this.
0:39
Below the second comment,
you'll need to write two selectors,
0:44
one that removes the text decoration
from navigation links only and
0:49
another that changes a nav
links text color when hovered.
0:53
Again, you can set the text
to whatever color you like.
0:57
Then you're going to create hover and
1:01
visited styles for
all links inside the main element.
1:04
For example, you can remove
the text decoration on hover and
1:09
change a links color,
once it's been visited.
1:13
After that, you'll change the background
color of the submit button only when
1:17
it's active then give the text
field a blue border upon focus.
1:24
For the next two selectors, you're going
to apply classes and ids to the HTML.
1:32
So, for example,
1:37
the next comment asks you to give the span
tag in the footer a meaningful class name.
1:39
Then select it in the style sheet and
reduce its font size.
1:44
And you'll also give the image
tag in the header an id,
1:50
selected, and set its width to 100 pixels.
1:55
Finally, you're going to target
all heading tags on the page and
2:01
set their font family to the font
stack provided in the comment.
2:05
When you're finished,
your page should look similar to this.
2:10
This exercise is a great way to
practice what you've learned so
2:13
far about CSS selectors.
2:16
So good luck, have fun,
and in the next video,
2:18
I will walk you through the solution.
2:20