I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

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

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

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.

For full recreation of quiz conditions, it is suggested that you print out this page and write your answers on the page. The quiz key will print out separately.

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

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.