Let's Practice Selectors!2:24 with Guil Hernandez
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.
[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 up