Targeting HTML Elements in CSS
Assessment
Activity
Enlightenment
To target an HTML element by id in CSS,
use only the id of the element
add a period before the id of the element
add a hashtag before the id of the element
add a percent sign before the id of the element
To target an HTML element by class in CSS,
use only the class name of the element
add a period before the class name of the element
add a hashtag before the class name of the element
add a percent sign before the class name of the element
To target an HTML element in CSS,
use only the name of the element
add a period before the name of the element
add a hashtag before the name of the element
add a percent sign before the name of the element
To add styles to multiple targets, separate each target with a
space
comma
semicolon
hashtag
To add styles to a target within another target, separate the targets with a
space
comma
semicolon
hashtag
Hit the Target!
Follow the instructions below to add styles to targeted HTML elements.
Open the project file. You should see three large boxes that each contain three smaller boxes.
Save the html file to your computer and open it in the HTML editor of your choice.
Review the HTML and CSS code to understand how the page was constructed.
Without changing any of the HTML code, add additional CSS to:
-
Change the background color of the boxes inside the first large div to red.
-
Change the background color of the boxes inside the second large div to green.
-
Change the background color of the boxes inside the third large div to blue.
nothing extra for this lesson :(