wayground logo

Free Printable Worksheets

NEW

Font size

S
M
L
XL
Worksheets

Understanding CSS Selectors and Styling

Total questions: 30

Worksheet time: 14mins

Name
Class
Date
1.

What does CSS stand for?

a)

Cascading Style Sheets

b)

Computer Style Sheets

c)

Colorful Style Sheets

d)

Creative Style Sheets

2.

What is the correct format for selecting elements by class in CSS?

a)

Using the class name directly

b)

Using an asterisk before the class name

c)

Using a hash followed by the class name

d)

Using a period followed by the class name

3.

Which HTML attribute is used to apply styles to a specific group of elements?

a)

class

b)

id

c)

style

d)

group

4.

How can you make a CSS rule more specific to only apply to paragraph tags with a certain class?

a)

Add 'p' after the class name

b)

Use only the class name

c)

Add 'p' in front of the period and class name

d)

Use only the tag name

5.

What is a valid class name in CSS?

a)

A name with special characters

b)

A name starting with a number

c)

A name with spaces

d)

A name without spaces and not starting with a number

6.

What happens when an HTML element has multiple classes?

a)

CSS rules for all classes apply

b)

Only the first class rule applies

c)

Only the last class rule applies

d)

No rules apply

7.

How can you style a group of elements to have a red background and larger font if they have a specific class?

a)

Modify the browser settings

b)

Add a CSS rule for that class with the desired styles

c)

Change the HTML structure

d)

Use inline styles on each element

8.

What does it mean when a class styling overrides tag styling?

a)

Tag styling is broken

b)

Class styling is considered more specific than tag styling

c)

Class styling is always on top

d)

Tag styling is not needed

9.

How can you create a checkerboard pattern using classes in CSS?

a)

Alternate classes with different background colors in a grid

b)

None of the above

c)

Use a single class for all cells

d)

Apply a checkerboard image as background

10.

What should you do if you want to make a class name valid that starts with a number?

a)

Replace the number with a letter

b)

Put the number at the end of the class name

c)

Start the class name with a special character

d)

Remove the number

11.
What does CSS stand for? 
a)
Creative Style Sheets
b)
Cascading Style Sheets
c)
Colorful Style Spread
d)
Computer Style Spread
12.
Where in the HTML document is the correct location to insert code to link to your external CSS? 
a)
In the <head> section
b)
In the <body> section
c)
At the very end of the document
d)
At the very beginning of the document
13.
Which is correct CSS syntax? 
a)
{ body; color=black;}
b)
body: color= black
c)
body {color:black;}
d)
(body color is black) 
14.
What symbols go around the properties for each CSS selector?
a)
< >
b)
[ ]
c)
{ }
d)
( )
15.
Which is the value in this CSS?
p {color: red;}
a)
p
b)
color
c)
red
16.
Which is the selector for a link?
a)
a { }
b)
link { }
c)
href { }
d)
a href { }
17.
What is the difference between HTML and CSS?
a)
CSS is one type of HTML
b)
HTML gives a webpage structure. CSS provides styling.
c)
CSS structures a webpage. HTML strictly provides styling.
d)
There is no difference.
18.
How can you make a numbered list?
a)
<list>
b)
<ol>
c)
<dl>
d)
<ul>
19.
How can you make a bulleted list?
a)
<ol>
b)
<ul>
c)
<list>
d)
<dl>
20.
The style that you are applying to a selector, e.g. border.
a)
Property
b)
Value
c)
Keyword
d)
Length Units
21.
_______ is generally any single line of CSS that appears between the curly braces, whether shorthand or longhand.
a)
Keyword
b)
Declaration 
c)
Value
d)
Boogers
22.
What is this an example of?
/* This is a multi-line comment */
a)
Syntax
b)
Property 
c)
Value
d)
Comment
23.
Using Responsive Web Design (RWD) ensures that site will display correctly in all desktop browsers and mobile devices.
You used a grid-based layout and resize-able images, which is another RWD technique that you can use in responsive design?
a)
Use relative units, such as percentages, for positioning page elements
b)
Use standard page structure elements, including <header>, <footer> and <article>,  because older devices will display content in the structure elements correctly
c)
Use static pixels for all content positioning 
d)
Use smaller fonts for all body text, to ensure it will appear correctly on smaller screens
24.
To ensure a site's pages render as expected by the target audience, regardless of the device used to access them, which design model should be followed?
a)
Dual platform design
b)
HTML Transitional 1.0 design
c)
Responsive Web Design
d)
Cascadingd Style Sheet design
25.
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 (-)
26.
Which is the selector in this CSS?
p {color: red;}
a)
p
b)
color
c)
red
27.
John wants the name of his book to appear in search results for Google. Where should this information be
placed within his webpage?
a)
head
b)
meta
c)
body
d)
nav
28.

What is wrong with this code?

a)

The style sheet <link> statement belongs between <head> and </head>

b)

The style sheet <link> statement belongs between <title> and </title>

c)

The style sheet <link> statement belongs between </head> and <body>

d)

The style sheet <link> statement belongs immediately after the DOCTYPE statement

29.
What does the position:fixed style do when styling an image?
a)
Pins an image in one place on the browser window even when the user scrolls the page content.
b)
Sizes an image to a fixed size no matter how big the user expands the browser.
c)
Places an image in a specific spot on the page relative to the text before it
d)
Places an image based on the users scroll position
30.
________ positioning keeps the element in the normal document flow, while ________ positioning takes it out of the normal flow.
a)
relative, absolute
b)
absolute, relative
c)
fixed, static
d)
parallel, universal