Free Printable HTML AND CSS

1.

Examine the following HTML code:

<style>

body {color: maroon;

Font-size: 12pt;}

p {color: gray;

font-size: 12pt;}

.shirts {color: burgundy;

font-size: 14pt;}

</style>

What will be the color of the text in the second paragraph?

a)

Slateblue

b)

Burgundy

c)

Maroon

d)

Gray

2.

Match the definition to its style sheet term.

A style indicator that can be used on any tag

a)

class

b)

ID

c)

Element

d)

pseudo-class

3.

Match the definition to its style sheet term.

A style indicator that is used on a specific HTML tag

a)

class

b)

ID

c)

Element

d)

pseudo-class

4.

Match the definition to its style sheet term.

A style indicator used for a specific behavior on a specific HTML tag

a)

class

b)

ID

c)

Element

d)

pseudo-class

5.

For each statement below which is the true statement

a)

The heading "Coming Soon" will have a font size of 16 points.

b)

The paragraph will have a color of steelblue

c)

The paragraph will have the Georgia font.

6.

Indicate which style sheet would be used for the situation.

The body tag needs to have the segoe UI font throughout the entire website.

a)

External

b)

inline

c)

internal

7.

Indicate which style sheet would be used for the situation.

An address tag at the bottom of a new items page needs to have a color of dark magenta. No other address tags need formatting.

a)

External

b)

inline

c)

internal

8.

Indicate which style sheet would be used for the situation.

A sales page needs to have a lightgray background, and as a result its text needs to be in dark gray.

a)

External

b)

inline

c)

internal

9.

For each statement regarding best practices on creating style sheets using CSS, select the false statement in the given statements.

a)

Reusing code from one part of a style sheet to another helps to minimize syntax errors.

b)

Setting the body element to have a font of Segoe UI will ensure every device that views the website will see that font.

c)

Web pages that include style sheets should be tested on multiple browsers.

10.

Match the following CSS properties with a value for that property.

-Bold

a)

font-style

b)

font-weight

c)

text-decoration

11.

Match the following CSS properties with a value for that property.

-italic

a)

font-style

b)

font-weight

c)

text-decoration

12.

Match the following CSS properties with a value for that property.

-Underline

a)

font-style

b)

font-weight

c)

text-decoration

13.

Match the appropriate HTML element or attribute with its use in displaying images, Not all choices will be used.

Defines the location of a picture.

a)

src

b)

img

c)

alt

14.

Match the appropriate HTML element or attribute with its use in displaying images, Not all choices will be used.

HTML tag used to display a picture

a)

src

b)

img

c)

alt

15.

Match the appropriate HTML element or attribute with its use in displaying images, Not all choices will be used.

Used to display text when a picture does not load properly

a)

src

b)

img

c)

alt

16.

Which HTML tag is used to display a vector-based graphic that is being built on the page (meaning it was not build using another app)?

a)

svg

b)

img

c)

script

d)

canvas

17.

Match the Html element with its definition.

-script

a)

This tag will start a canvas but is not just used to build a canvas

b)

Used to build graphics that will not become pixelated no matter what their size.

c)

Used to load and display pictures

d)

Uses JavaScript to build pixel-based graphics

18.

Match the Html element with its definition.

-svg

a)

This tag will start a canvas but is not just used to build a canvas

b)

Used to build graphics that will not become pixelated no matter what their size.

c)

Used to load and display pictures

d)

Uses JavaScript to build pixel-based graphics

19.

Match the Html element with its definition.

-img

a)

This tag will start a canvas but is not just used to build a canvas

b)

Used to build graphics that will not become pixelated no matter what their size.

c)

Used to load and display pictures

d)

Uses JavaScript to build pixel-based graphics

20.

Match the Html element with its definition.

-img

a)

This tag will start a canvas but is not just used to build a canvas

b)

Used to build graphics that will not become pixelated no matter what their size.

c)

Used to load and display pictures

d)

Uses JavaScript to build pixel-based graphics

21.

Match the Html element with its definition.

-canvas

a)

This tag will start a canvas but is not just used to build a canvas

b)

Used to build graphics that will not become pixelated no matter what their size.

c)

Used to load and display pictures

d)

Uses JavaScript to build pixel-based graphics

22.

You have a video, called blues, that is available in two forms: mp4 and mov. The mp4 video should play if the browser supports it. The mov video should only play if the mp4 format is not supported. A user should be able to play the video when pressing a play button.

Place the code lines used to display this video in the correct order. not every line of code will be used. Which is the LINE 1

a)

b)

c)

d)

</video>

23.

You have a video, called blues, that is available in two forms: mp4 and mov. The mp4 video should play if the browser supports it. The mov video should only play if the mp4 format is not supported. A user should be able to play the video when pressing a play button.

Place the code lines used to display this video in the correct order. not every line of code will be used. Which is the LINE 2

a)

b)

c)

d)

</video>

24.

You have a video, called blues, that is available in two forms: mp4 and mov. The mp4 video should play if the browser supports it. The mov video should only play if the mp4 format is not supported. A user should be able to play the video when pressing a play button.

Place the code lines used to display this video in the correct order. not every line of code will be used. Which is the LINE 3

a)

b)

c)

d)

</video>

25.

You have a video, called blues, that is available in two forms: mp4 and mov. The mp4 video should play if the browser supports it. The mov video should only play if the mp4 format is not supported. A user should be able to play the video when pressing a play button.

Place the code lines used to display this video in the correct order. not every line of code will be used. Which is the LINE 4

a)

b)

c)

d)

</video>

HTML AND CSS

Total questions: 25

Worksheet time: 25mins

Similar Resources on Wayground