CSS Selectors

Practice NOW!

Solve the exercises below this HTML file. Feel free to search online for answers! This is what a programmer does!

Exercise 1: Tag Selector

  1. Apply a style to the <body> element, setting the background color to light gray. Hint: Change the background-color property.

Exercise 2: Class Selector

  1. Style the elements with the class “header” to have a blue color and be centered. Hint: Change the color and text-align properties.

Exercise 3: ID Selector

  1. Add an underline and change the color to green for the element with the ID “special-link”. Hint: Change the text-decoration and color properties.

Exercise 4: Descendant Selector

  1. Make the text inside the <ul> elements bold. Hint: Change the font-weight property.

Exercise 5: Child Selector

  1. Style only the direct children of the <ul> by giving them a border. Hint: Add a border property to the direct children of the ul.

Exercise 6: Attribute Selector

  1. Target the <a> element with an attribute selector and give it a red color. Hint: Change the color property.

Exercise 7: Pseudo-Class Selector

  1. Style the link so that it changes color when hovered over. Hint: Change the color property.

Exercise 8: Pseudo-Element Selector

  1. Apply italic style to the first line of the paragraph inside the container. Hint: Change the font-style property.

Exercise 9: Grouping Selector

  1. Group the <h1> and <h2> elements and give them a common style. hint: Change the font-style property.

Exercise 10: Universal Selector

  1. Apply a margin to all elements on the page. Hint: Add a common property, such as margin.

Here is the solution. Please do not open if you haven’t tried to solve it yourself!