Wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

CSS Selector by ID

Total questions: 30

Worksheet time: 16mins

Name
Class
Date
1.
If you want to have more than one property for a CSS selector, what character separates them?
a)
comma (,)
b)
semi-colon (;)
c)
colon (:)
d)
dash (-)
2.
Which is correct CSS syntax? 
a)
{ body; color=black;}
b)
body: color= black
c)
body {color:black;}
d)
(body color is black) 
3.
Select the code below that uses CSS to configure a background color of #000000 for a web page.
a)
body { background-color: #000000; }
b)
body { bgcolor: #000000; }
c)
document { background­-page: #000000; }
d)
None of these
4.
What symbols go around the properties for each CSS selector?
a)
< >
b)
[ ]
c)
{ }
d)
( )
5.
Which is the value in this CSS?
p {color: red;}
a)
p
b)
color
c)
red
6.
Which is the selector for a link?
a)
a { }
b)
link { }
c)
href { }
d)
a href { }
7.
Which CSS code centers text?
a)
p {align: center;}
b)
p {text-align: center;}
c)
p {align=center;}
d)
p {center;}
8.
Which is the selector in this CSS?
p {color: red;}
a)
p
b)
color
c)
red
9.

What does a class do?

a)

adds color to words

b)

adds style to specific elements

c)

adds style to a whole page

d)

adds a lot more work

10.

Select the rule set to make all the text in your web page blue and centered.

a)

p {

color: blue;

}

b)

body {

text-align: left;

color: blue;

}

c)

p {

text-align: center;

color: blue;

}

d)

body {

text-align: center;

color: blue;

}

11.

What is a class selector?

a)

Selects any element within the HTML document that has a class attribute.

b)

Allows you to select any element within the HTML document as long as it has an ID attribute

c)

Allows you to select the descendant of elements within the document

12.

Which is the correct (and most specific) CSS selector statement to change the text color of the first <li> element to red in the following example:


<ul>

<li class="redtext">Gravy</li>

<li>Turkey</li>

<li>Potato</li>

</ul>

a)

.redtext { color: red; }

b)

#redtext { color: red; }

c)

li > redtext { color: red; }

13.

Which is the correct (and most specific) CSS selector statement to select the text inside the HTML element and change the text color to red in the following example:

<div id="media">

Lorem Ipsum Dolores.

</div>

a)

>media { color: red; }

b)

.media { color: red; }

c)

#media { color: red; }

14.

You can apply multiple CSS IDs to the multiple elements.

a)

True

b)

False

15.

What does the ID selector do?

a)

Apply the style to a group of elements

b)

Apply the style to all the elements

c)

Apply the style to a specific element

16.

A selectors in CSS is basically used to select the element you want to style.

a)

TRUE

b)

FALSE

17.

Declarations are split into two parts (a property and a value), and are separated by a comma.

a)

TRUE

b)

FALSE

18.

The element selectors select the HTML elements by tag name.

a)

TRUE

b)

FALSE

19.

The id selector is written with the period character (.), followed by the id of an element.

a)

TRUE

b)

FALSE

20.

The class selector selects the element based on the class attribute.

a)

TRUE

b)

FALSE

21.

1.    What is the correct CSS syntax for making all the <p> elements italic?

a)

p {font-weight:italic;}

b)

p {font-style:italic;}

c)

<p style="text-decoration:italic">

d)

p {text-decoration:italic;}

22.

Choose the correct CSS code to set the list style for unordered lists to “square”, and the list style for ordered lists to “upper-roman”.

a)

ul {list-style-type: square;}

ol {list-style-type: upper-roman;}

b)

ol {list-style-type: square;}

ul {list-style-type: upper-roman;}

c)

ol {list-style-type: square;}

ol {list-style-type: upper-roman;}

d)

ul {list-style-type: square;}

ul {list-style-type: upper-roman;}

23.

Identify the CORRECT CSS syntax to set a background color.

a)

{ body; color: blue }

b)

body { color: blue }

c)

body: color { blue }

d)

{ body; color; blue }

24.

Choose how does an ID selector is used to set the font size to be 12px.

a)

para1 {font-size: 12px;}

b)

#para1 { font-size: 12px;}

c)

#para1 { font-size: 12px;}

d)

#para1 { font-size: 12px; }

25.

Based on the following script, discover the style rule that will be applied to the HTML element with class named as "center large".

p.center { text-align: center; }

p.large { font-size: 300%; }

a)

All <center> and <large> elements will be center-aligned, with a large font size.

b)

All HTML elements with class="center" and class="large" will be center-aligned, with a large font size.

c)

All <p> elements with class="center large" will be center-aligned, with a large font size.

d)

All <p = center> and <p = large> elements will be center-aligned, with a large font size.

26.

Choose the codes on how do you set the border for the following paragraph to solid style with red color. 

<html>

<body>

        <p>Hello World!</p>

        <p>These paragraphs are styled with CSS.</p>

</body>

</html>

a)

p {

border-style: solid;

border-color: red;

}

b)

p {

style: solid;

color: red;

}

c)

p {

border: solid;

color: red;

}

d)

p {

border: solid, red;

}

27.

The function that CSS language is

a)

to style a webpage

b)

aesthetics an entire website

c)

used to stylize elements written in a markup Language

d)

all are correct

28.

The difference between class and id attributes is...

a)

the identifier is created using a dot (.) and the class use a # symbol.

b)

a Class must be used just once whereas 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

29.

The image represents an (external, inline, or internal) (a)   style used in this created document.

30.

This is the correct link to connect one HTML with a CSS page...

a)

b)

c)