Cascading Style Sheets For Dummies Quiz

Quiz Answer Key and Fun Facts

1. Before a Cascading Style Sheet is useful, you need to include one into your HTML page. What HTML tag can you use to apply CSS rules to a document?

Answer: style

The 'style' tag allows you to insert inline CSS (as opposed to an external style sheet) into your document. You may also apply a style to any tag using the 'style' attribute. With exceptions, styles are applied in the order that they are defined or included - this explains the 'cascading' part of its name.

2. The HTML 'link' tag allows you to include an external style sheet into your document, as if it had been defined there in a 'style' tag. What is the equivalent rule in CSS?

Answer: @import

You can use
@import url("mystyles.css");
to include the style rules in that file at that point in your document. That stylesheet is allowed to contain more @import rules itself, and so on - although more than a couple is excessive, especially if the user's browser has to download them all.

More about the @import rule: http://www.w3.org/TR/REC-CSS2/cascade.html#at-import

3. Now to start defining some CSS rules! How do I set the colour of all text on the page to red? (Due to technical restrictions, the curly braces have been substituted for square brackets.)

Answer: * [ color: red ]

The asterisk is the 'universal selector' which matches all elements in the document, be they paragraphs, headings or table cells.

More about the universal selector and selectors in general: http://www.w3.org/TR/REC-CSS2/selector.html#universal-selector

4. Can you explain what the following property means? border: 2px solid #FF0000

Answer: A two pixel thick, solid red border

HTML colours can be named like the previous question, or defined as hexadecimal colour codes, prefixed with a # . The first two hexadecimal digits specify the amount of red from 0-255, the middle two specify green, and the last two are for blue. Full blue would be #0000FF .

The style for a complete border can be specified in one declaration. If you wish, you can specify borders for each of the four edges around an element using the border-left, border-top, border-right and border-bottom properties, or specify the properties of the border itself with border-width, border-style and border-color. If you really want, you can be specific with border-left-width, etc.

Learn more about the 'border' property here: http://www.w3schools.com/css/pr_border.asp

5. The CSS 'box model' describes a rectangular area around an element, used when laying out elements on the page. Which three properties affect the box model?

Answer: margin, padding, border

Around the content area of an element (for example, a paragraph of text) you may have a visual BORDER. PADDING sets the distance between the border and the content. MARGIN sets the distance between the border and other elements on the page.

The 'box model' is described in the W3C specification here: http://www.w3.org/TR/REC-CSS2/box.html

6. I've applied borders around all four edges to every cell in a table. (The table itself has no border.) However, the borders between cells are twice as thick as I wanted them to be. I want them to be the same width as the borders on the edges of the table. What should I add to the rule for the 'TD' element to accomplish this?

Answer: border-collapse: collapse

The separated border model draws every cell's border as specified. The collapsing border model only draws one border between cells, choosing the most 'eye-catching' style if the adjacent cells have conflicting styles.

Technical information on the collapsing border model can be found here: http://www.w3.org/TR/REC-CSS2/tables.html#collapsing-borders

7. I have a document that contains a single image and several paragraphs of text below it. I want to place the image on the left of the page and have the text wrap around it on the right side. How do I do this?

Answer: Set the "float: left" style on the image

A floating element is shifted to the left or right of the current line. Regular inline content flows alongside it (on the right for a left-floated element, and vice versa). Thus you can 'wrap' other elements around the floated element. This is a very important tool when making a page design with as little HTML as possible, and in particular, without using tables.

If you want to force an element to be placed below any floating elements on the left, right or both sides, use the 'clear' property.

To learn more about the float property, visit: http://www.w3schools.com/css/pr_class_float.asp

8. I have a simple document containing a long paragraph of text (P) with an image (IMG) placed roughly in the middle of the text. There are no styles in the document yet. I want to place the image 8 pixels higher than its normal, unstyled position - what should I add to the image's 'style' attribute to achieve this?

Answer: position: relative; top: -8px;

This requires relative positioning; the position the element has in the 'normal flow' (what you see in the unstyled document) is calculated first, then it is moved in the appropriate direction without disturbing any other elements in the normal flow. Don't forget, as you increase the vertical position, the element moves down. You need to move the image -8px in this case.

Absolute positioning will position the element at the exact coordinates you specify within its 'containing block', which is the document itself in this case. It is taken out of the normal flow completely, so the paragraph of text will be completely uninterrupted as if there was no image in the middle of it.

Positioning like this is quite complex. You can see the difference between all types of positioning here: http://www.w3.org/TR/REC-CSS2/visuren.html#comparison

9. I have a DIV element containing a lot of content (text, images etc.). I want to restrict the width and height of the DIV element, limiting the amount of content visible at any time, but still allow the user to view all of its contents.

Answer: overflow: scroll

If you said "overflow: visible", this would not be an acceptable solution - the size of the DIV would appear to be correct, but all of its content would be displayed (and outside the DIV element!) regardless. On most web browsers, "overflow: auto" will display scroll bars to view more content only if it is necessary, although printouts of the HTML document are expected to display the full content. "overflow: scroll" will always display scroll bars, whether they are necessary or not.

Learn more about the overflow property here: http://www.w3schools.com/css/pr_pos_overflow.asp

10. Lots of websites have links that change colour when you move your cursor over them. This is implemented in CSS nowadays, though many newbies are unaware of this non-obvious solution. What selector represents an A tag that has the cursor over it?

Answer: a:hover

This is the most well-known example of a pseudo-class. These are classes that apply to elements in certain cases only, which cannot be determined just by looking at the HTML source or document tree. These include :link (when the element is an unvisited link), :focus (when the element has keyboard focus, such as inputs on a form) and :first-child, which applies to just those elements which are the first child of some other element.

Read about the pseudo-classes here: http://www.w3schools.com/css/css_reference.asp#pseudoclasses

Source: Author Lutrine

This quiz was reviewed by FunTrivia editor crisw before going online.
Any errors found in FunTrivia content are routinely corrected through our feedback system.

CSS offers a way to separate styles and presentation from the content of an HTML document, simplifying page design and creation. Most modern websites make heavy use of this, but do you know enough to hold your own in the world of web development?

NEXT>

NEXT>

NEXT>

NEXT>

NEXT>

NEXT>

NEXT>

NEXT>

NEXT>