Know Your CSS
Test your knowledge of Cascading Style Sheets
with this simple quiz.
1. Which of the following units of measurement is a relative value?
Pixels are relative in size to the
pixels per inch ratio of the viewer's monitor which can vary considerably
from screen to screen.
2. Match each colour panel with the section of code that defines it.
| aqua | 
|
| rgb(54%, 77%, 0%) | 
|
| rgb(84, 0, 199) | 
|
| #f34 | 
|
| #fff71a | 
|
Item 1 - there are 16 named colours in CSS one of which
is "aqua", a pale but intense blue.
Items 2-5 - the RGB (Red, Green, Blue) system dictates how colours appear on a monitor. These four pieces of code all relate to values of Red, Green and Blue.
Item 2 - in this example R, G and B are represented in that order as percentages. A medium amount of red, a lot of green and no blue should produce a warm green.
Item 3 - here R, G and B are represented as absolute values on a scale of 0 to 255. So about 30% red plus no green plus a lot of blue should produce purple.
Items 4-5 - here RGB values are represented using "hexidecimal" values. The hexidecimal scale facilitates the representation of 16 units using a single digit - 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, a, b, c, d, e, f.
Item 4 - This is a valid shorthand version of #ff3344. The first two digits represent the red value, the second two green and the last two blue. So a high red, combined with fairly low green and blue gives you a reddish pink.
Item 5 - here a high red value plus a high green combined with a low blue will give you yellow.
Items 2-5 - the RGB (Red, Green, Blue) system dictates how colours appear on a monitor. These four pieces of code all relate to values of Red, Green and Blue.
Item 2 - in this example R, G and B are represented in that order as percentages. A medium amount of red, a lot of green and no blue should produce a warm green.
Item 3 - here R, G and B are represented as absolute values on a scale of 0 to 255. So about 30% red plus no green plus a lot of blue should produce purple.
Items 4-5 - here RGB values are represented using "hexidecimal" values. The hexidecimal scale facilitates the representation of 16 units using a single digit - 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, a, b, c, d, e, f.
Item 4 - This is a valid shorthand version of #ff3344. The first two digits represent the red value, the second two green and the last two blue. So a high red, combined with fairly low green and blue gives you a reddish pink.
Item 5 - here a high red value plus a high green combined with a low blue will give you yellow.
3. The URL of a background image for a CSS element needs to be relative to the XHTML file. True or false?
The URL of any image for a CSS element needs to be relative to the Stylesheet
NOT the XHTML file. Getting this wrong is a common mistake.
4. Which side of the following element will have the widest padding?
.box {padding: 5px 10px 0 20px;}
.box {padding: 5px 10px 0 20px;}
Values setting padding and other dimensions on all four sides of a CSS element
are always written in the order - top, right, bottom, left (TRouBLe). This is one of those rules you get to learn off by
heart.
5. Which of the following values, when applied to the position
property of an element, will stop it moving when the browser window is scrolled?
Confusing names that mean very different things. All are correct values for a
position property of an element but only "fixed" nails it down when you scroll the browser window.
(Not in Internet Explorer 6.0 or earlier of course)