Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice CSS Selectors!
You have completed Practice CSS Selectors!
Preview
CSS 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.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up