wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

CSS Quiz

Total questions: 65

Worksheet time: 1hrs 5mins

Name
Class
Date
1.

Change the border size of the body or image

a)

border-style

b)

border-width

c)

border-color

d)

width

2.

To create a dotted border around the page

a)

border-style

b)

border-width

c)

border-color

d)

width

3.

Set the color of the border

a)

border-style

b)

border-width

c)

border-color

d)

width

4.

sets the color of words in a paragraph

a)

h1 {

color: pink;

}

b)

img {

color: pink;

}

c)

body {

color: pink;

}

d)

p {

color: pink;

}

5.

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

6.

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;

}

7.

Which selector will change the font of the text?

a)

font-size

b)

text-align

c)

font-famiy

d)

text-decoration

8.

Which rule set would change the font size to 24?

a)

font-size: 24

b)

size: 24;

c)

font-size: 24;

d)

font size: 24;

9.

What symbol should you use to target an id in css?

a)

.

b)

+

c)

id

d)

#

10.

What symbol should you use to target a class name in css?

a)

#

b)

()

c)

.

d)

class

11.

What is the correct syntax to change the background color with css?

a)

background-color: purple;

b)

background-color = "purple";

c)

backgroundcolor=orange

d)

change-background-color: purple

12.

TRUE OR FALSE: HTML is used to style web pages.

a)

True

b)

False

13.

TRUE OR FALSE: CSS is used to style web pages

a)

True

b)

False

14.

What is missing from this HTML skeleton?


<!DOCTYPE html>

<html>

<body>

</body>

</html>

a)

<head></head>

b)

<div></div>

c)

<img></img>

d)

<head>

15.

What tag do you use to make a numbered list?

a)

<list>

b)

<ol>

c)

<li>

d)

<ul>

16.

TRUE OR FALSE: All tags require a closing tag.

a)

True

b)

False

17.

Where should you put the link tag to connect your CSS and HTML file?

a)

Between the <head> </head> in HTML

b)

Between the <body> </body> in HTML

c)

None of the above.

18.

Which of the following is the correct CSS link tag?

a)

<link rel="styles" href="stylesheet.css">

b)

<link href="stylesheet">

c)

<link rel="stylesheet" src="styles.css">

d)

<link rel="stylesheet" href="styles.css">

19.
What does CSS stand for? 
a)
Creative Style Sheets
b)
Cascading Style Sheets
c)
Colorful Style Spread
d)
Computer Style Spread
20.
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
21.
Which is correct CSS syntax? 
a)
{ body; color=black;}
b)
body: color= black
c)
body {color:black;}
d)
(body color is black) 
22.
What symbols go around the properties for each CSS selector?
a)
< >
b)
[ ]
c)
{ }
d)
( )
23.
Which is the value in this CSS?
p {color: red;}
a)
p
b)
color
c)
red
24.
Which is the selector for a link?
a)
a { }
b)
link { }
c)
href { }
d)
a href { }
25.
How can you make a bulleted list?
a)
<ol>
b)
<ul>
c)
<list>
d)
<dl>
26.
The style that you are applying to a selector, e.g. border.
a)
Property
b)
Value
c)
Keyword
d)
Length Units
27.
_______ 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
28.
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 (-)
29.
Which is the selector in this CSS?
p {color: red;}
a)
p
b)
color
c)
red
30.
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
31.

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

32.
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
33.
Jerry wants to insert a line break into his webpage. Which code should he use?
a)
<ul>
b)
<li>
c)
<br>
d)
<h1>
34.
Which tag defines the visible content of a web document?
a)
<head>
b)
<meta>
c)
<title>
d)
<body>
35.
A properly coded HTML tag will always be found between which two symbols?
a)
( )
b)
{ }
c)
[ ]
d)
< >
36.
Which line of code correctly creates a link to Amazon's website?
a)
<a ref=http://www.amazon.com>Amazon
b)
<href=http://www.amazon.com>Amazon<a>
c)
<a href="http://www.amazon.com">Amazon
d)
<a href="http://www.amazon.com">Amazon</a>
37.

Which one is the correct syntax for CSS?

a)

property {selector : value}

b)

value {property : selector}

c)

selector {value : property}

d)

selector { property : value}

38.
Which of the following is NOT a function of the <title> </title> element?
a)
Defines a title in the browser tab.
b)
Provides a title for the page when added to favorites/bookmarks
c)
Creates the first heading on the index page of the website
d)
Displays a title for the page in search engine results
39.

Which of the following ways is correct to Set the Grid Container ?

a)

<div class="grid-container">

b)

<div class="container">

c)

None of the above

40.
The code for the comment tag in CSS is
a)
<!-- comment -->
b)
<!-- comment >
c)
/* comment /*
d)
/* comment */
41.
Which is the correct way to format a Font Family for a paragraph? (Hint: make sure you have more than one backup font!)
a)
p { font-face: Arial, Verdana, San-Serif; }
b)
p { font-family: Arial, Verdana, San-Serif; }
c)
p { family-font: Arial, Verdana, San-Serif; }
d)
p { font: Arial, Verdana, San-Serif; }
42.
Which CSS code centers text?
a)
p {align: center;}
b)
p {align=center;}
c)
p {text-align: center;}
d)
p {center;}
43.
What unit of measurement does CSS use for size?
a)
px
b)
em
c)
%
d)
All work
44.
You should always define a backup font-family in CSS.
a)
True
b)
False
45.

How do you change font sizes in CSS?

a)

font-family: 20pt;

b)

font-weight: 20pt;

c)

font-size: 20pt;

d)

font-align: 20px;

46.

How can we position an image to the left?

a)

float: left;

b)

align: left;

c)

padding: left;

d)

margin: left;

47.
Used to change the look of the text (ex. monospace, fantasy, etc.)
a)
font-size
b)
font-weight
c)
font-family
d)
font-style
48.
CSS coding used to insert italics
a)
font-size
b)
font-weight
c)
font-style
49.
Used within hyperlinking in order to link a url to an outside webpage
a)
<a href="website url">
b)
<p id="word">
c)
<a href="#idtag">
d)
<url></url>
50.
CSS coding used to bold text
a)
font-family
b)
font-weight
c)
font-size
d)
font-style
51.

What code in the stylesheet could have made the text green? (Click on the image to make it larger)

a)

1 and 3

b)

2 and 4

c)

2 and 3

d)

3 and 4

e)

1, 2, 3, and 4

52.

The web developer wants to make the "My Page" text larger. Which TWO of the following would work? (Click on image to make it larger)

a)

Use <h6> instead of <h3>

b)

Use <h1> instead of <h3>

c)

Put the "My Page" text inside the tags.

d)

Use CSS to set the font-size property of the h3 tag

e)

Put the code `style="larger"` inside the h3 tag.

53.

If you wanted an element to have a curved corner, like an image, what CSS property would you use to do it?

a)

float

b)

border-style

c)

border-width

d)

border-radius

e)

margin

54.

Which property would you use to change how tall an image is on an html page?

a)

width

b)

height

c)

margin

d)

float

55.

Which property would select to change the amount of space around an image on an html page?

a)

float

b)

margin

c)

height

d)

width

56.
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 (-)
57.

th

a)

one cell in a row of headers

b)

one data cell

c)

one row of headers

d)

one column of headers

58.

tr

a)

one column on the right

b)

one cell in a table

c)

one row of anything

d)

one column of anything

59.

td

a)

one cell in a header

b)

one column of a row

c)

one row of a column

d)

one data cell in a row

60.
What type of list is this?
a)
Ordered
b)
House
c)
Bulleted
d)
Unordered
61.
What type of list is this?
a)
Sport
b)
Unordered
c)
Square
d)
Ordered
62.
What type of list is this?
a)
Numbered
b)
Ordered
c)
Unordered
d)
Food
63.
What type of list is this?
a)
Cities
b)
Ordered
c)
Unordered
d)
Lettered
64.

What is a colspan?

a)

An attribute that is used with <th> or <td> element to horizontally span two or more columns.

b)

An open-source and front-end framework that contains HTML and CSS design templates.

c)

An attribute that is used with <th> or <td> element to vertically span two or more rows

d)

This is an element that we used on every website

65.

What is a table caption?

a)

Creates a table. Contains all other table elements.

b)

Adds a caption or title, which appears above the table by default.

c)

Contains all data for a table row

d)

Designates table cell contents. By default, the data is left-justifed.