

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects


tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

CSS Example Quiz

students / quizzes

Estimated reading time: 1 minute, 30 seconds


There are six questions in this quiz, which you have 15 minutes to complete. It is worth 10% of your final mark. There are 17 total points achievable. Code written must be XHTML 1.0 Strict and valid CSS in order to gain marks. Code that would not work in the browser will not gain any marks, but partial marks are possible for some questions, and are indicated where applicable.


Question 1

In CSS, what color is represented by the following hexadecimal code: #0f0 (2 marks)

Question 2

Name three different methods for creating a style on a web page. (1 mark each, for a possible total of 3 marks)

Question 3

A paragraph is given a font size of 1.25em. Expressed as a percentage, how much larger will paragraph text in this style be, compared to paragraphs unaffected by this rule? (2 marks)

Question 4

You wish all the paragraphs in your website to appear italicized. While you could add <em> to the markup for each paragraph, doing so would be time-consuming, inefficient, and confuse presentation with data, Instead, you decide to create a stylesheet to control the appearance of the paragraphs. Write the style for the paragraphs below, including the appropriate selector (2 marks).

Question 5

You wish to have an image named hog.gif placed in a paragraph on a page. The paragraph text needs to be wrapped around the left side of the image, which is 100 pixels high and 250 pixels wide. There should be a two pixel black border on the image.

Write the code to achieve this below, including the paragraph element. (6 marks)

Question 6

What is the CSS selector to adjust the appearance of links when the mouse is over them? (2 marks)


Question 1
Green more info
Question 2
inline, embedded, and linked. more info
Question 3
25% more info
Question 4
p { font-style: italic; }more info
Question 5
<p><img src=”hog.gif” alt=”Hog” style=”width: 250px; height: 100px; float: right; border: 2px solid black;” />Paragraph content</p>. Marking: Starting from a base score of zero: add 1 mark for correct use of the <p> tag and appropriate content, 1 mark for correct use of the <img> tag with the correct filename and appropriate use of alt, 1 mark for correct width and height, 2 marks for correct use of float, 1 mark for correct use of border. (The style attribute must be written correctly in order to gain any marks for CSS used). more info
Question 6
comments powered by Disqus
