Wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

CSS class - id

Total questions: 15

Worksheet time: 17mins

Name
Class
Date
1.

This tag allows you to define a new section in an HTML document:

a)

<style> </style>

b)

<div></div>

c)

.div

d)

#div

2.

The difference between the class selector and ID selector is...

a)

The identifier ID is created using a dot (.) and the class uses a # symbol.

b)

a class must be used just once whereas an Id can be applied multiple times on the HTML.

c)

a Class can be used by multiple HTML elements, while an Id must only be used by one HTML.

d)

This must be a unique element used in HTML

3.

This image presents a single selector sharing identical properties for multiple tags with a similar nature...

a)

b)

c)

d)

4.

#example { represents the creation of an ID selector, but if you want to call it on a page, the code line you should type would be...

(a)  

5.

Observe the next code blocks, then choose where the ID is correctly used:

a)

b)

6.

_________ are used to select and style content that HTML pages store...

a)

Id selector

b)

class selector

c)

element selector

d)

all are correct

7.

Observe the next code blocks, then choose where the ID was correctly applied:

a)

b)

8.

In the previous image, the class selector was applied, but the correct (and most specific) code line to change the text color of the first <li> element to red would be...

a)

.redtext { color: red; }

b)

#redtext { color: red; }

c)

li > redtext { color: red; }

d)

redtext{color:red};

9.

Observe the next code blocks, then choose the best answer for the class selector.

a)

b)

10.

What does the ID selector do?

a)

Apply the style to some selective elements.

b)

Apply the style to a specific element into HTML page.

c)

Apply the style to a group of elements into HTML page.

d)

Apply the style to all the elements in CSS.

11.

In the next question, explain: What will be the tag element that changes when you apply the shown properties?

4 lines
12.

Choose the best code block that organizes most effectively this point and get the displayed result

a)

b)

c)

13.

If you want to style simultaneously the next elements using minimum code, the most effective code block would be...

a)

b)

c)

14.

Explain clearly the action that produces the use of this ID selector (#Ch2) on this page:

4 lines
15.

The code used to create a class selector is: .basic {

Type the correct code including the next properties to style a paragraph (color, font, size, text alignment) including the previous class. Remember to use the correct syntax.

4 lines