CSS Advanced QuizS2C Home « CSS Advanced Quiz

The questions in this third quiz on CSS 1/2 are on the topics covered in the CSS Advanced section of the site. The table below lists the lessons, a description of the lesson content and the the quiz question number range.

Lesson Summary

Click on a lesson in the table to go to that lesson for a refresher on the topics for that lesson.

CSS Advanced Lessons Description Question Range
Lesson 1 - Generated ContentUsing Generated Content and letting the browser insert information into our pages.1 - 3
Lesson 2 - Attribute SelectorsA look at attribute selectors and how we can use them to select HTML elements.4 - 6
Lesson 3 - Styling ListsA look at how to style our lists using some useful CSS properties.7 - 10
Lesson 4 - Styling TablesFor this lesson we look at the CSS properties we can use with out HTML tables.11 - 15
Lesson 5 - NavigationA look at how to style navigation bars to look good on our web pages.16 - 20
Lesson 6 - LayoutIn this lesson we look at how to create page layouts for our websites.21 - 24
Lesson 7 - The Printed PageA look at how to style our data so it is suitable for printing.25 - 27
Lesson 8 - Other PropertiesA look at the CSS properties we haven't covered so far - direction, outline and unicode-bidi.28 - 31
Lesson 9 - CSS Advanced SummarySummarizing the tutorials in this section.

CSS Advanced Quiz

The quiz below tests your knowledge of the material learnt in the CSS Advanced section of the site.

Question 1 : Which pseudo selectors do we use in conjunction with the CSS 'content' property?
- We use the <code>:before</code> and <code>:after</code> pseudo selectors in conjunction with the CSS 'content' property.
Question 2 : The 'counter-increment' and 'counter-reset' respectively increment and reset one or more counters but what other CSS property sets these counters?
- The 'counter-increment' and 'counter-reset' respectively increment and reset one or more counters set using the CSS 'content' property.
Question 3 : Which pseudo selectors is commonly used in conjunction with the CSS 'quotes' property?
- We commonly use the <code>:lang</code> pseudo selectors in conjunction with the CSS 'quotes' property to set quotation marks for different language codes.
Question 4 : What is the following style an example of?
p[lang|="en"] { color: red;}
- <code>p[lang|="en"] { color: red;}</code> is an example of Subcode Matching.
Question 5 : What is the following style an example of?
img[alt~="Pie"]
- <code>img[alt~="Pie"]</code> is an example of Contains Value Matching.
Question 6 : What is the following style an example of?
img[alt="Chicken Dish"]
- <code>img[alt="Chicken Dish"]</code> is an example of Exact Value Matching.
Question 7 : Why should we use the CSS 'list-style-type' property in association with the CSS 'list-style-image' property?
- We use the CSS 'list-style-type' property in association with the CSS 'list-style-image' property to act as a 'fallback' in case the image is not found.
Question 8 : The CSS 'list-style-type' property value defaults to decimal for ordered lists; what is the default property value for unordered lists.?
- The CSS 'list-style-type' property defaults to disc for unordered lists.
Question 9 : How many types of markers are available for use when styling our lists?
- There are 3 types of markers (glyphs, numbering systems and alphabetic systems) available for use when styling our lists.
Question 10 : When styling our lists we can specify a type, image and what else?
- When styling our lists we can specify a type, image and position.
Question 11 : There are two models used for styling tables known as the 'separated border model' and the ?
- There are two models used for styling tables known as the 'separated border model' and the 'collapsed border model'.
Question 12 : When using the 'separated border model' what CSS property can we use to specify a distance between cells when the 'separated border model' is used?
- When using the 'separated border model' we use the 'border-spacing' CSS property to specify a distance between cells when the separated border model is used.
Question 13 : Which CSS property allows us to specify a position for a table caption?
- The 'caption-side' CSS property allows us to specify a position for a table caption.
Question 14 : Which CSS 'table-layout' property value renders tables the fastest?
- Setting the CSS 'table-layout' property value to 'fixed' renders tables the fastest as each row can be rendered as it is read, instead of reading the whole table in first as happends with 'auto'.
Question 15 : How many CSS properties does CSS give us for control over table presentation?
- CSS gives us 5 CSS properties for control over table presentation.
Question 16 : Although we can use all type of lists for navigation bars, which is the most commonly used list for this purpose?
- For the purpose of creating navigation bars the most commonly used lists are unordered lists.
Question 17 : Why do we set zero paddings and margins when creating a navigation bar?
- We set zero paddings and margins when creating a navigation bar to remove unwanted space around the navigation bar.
Question 18 : How do we prevent margins, borders and padding from overlapping?
- We prevent margins, borders and padding from overlapping by displaying our list as block elements.
Question 19 : Why would we use the CSS 'list-style' or 'list-style-type' properties when styling our navigation bars?
- We would we use the CSS 'list-style' or 'list-style-type' properties when styling our navigation bars to remove markers such as bullets.
Question 20 : How can we turn a vertical navigation bar into a horizontal navigation bar
- We turn a vertical navigation bar into a horizontal navigation bar by removing the CSS 'width' property from the style.
Question 21 : Which type of layout style presents data using the whole screen?
- The 'liquid' layout style presents data using the whole screen.
Question 22 : What is a drawback to using a 'liquid' layout?
- When using a 'liquid' layout text can become stretched on larger monitor sizes.
Question 23 : What is an advantage of using a 'fixed-width' layout?
- An advantage of using a 'fixed-width' layout' is that the display is constant regardless of monitor size.
Question 24 : How can you turn a 'fixed-width' layout into a 'liquid' layout?
- We can turn a 'fixed-width' layout into a 'liquid' layout by removing the 'width' CSS property from the #wrapper style used.
Question 25 : The CSS 'page-break-after', 'page-break-before' and 'page-break-inside' properties apply to all inline elements?
- The CSS 'page-break-after', 'page-break-before' and 'page-break-inside' properties apply to all block-level elements not inline elements.
Question 26 : What are braille, handheld, projection, speech and tv examples of?
- Braille, handheld, projection, speech and tv are examples of media-types.
Question 27 : Which CSS property specifies the minimum number of lines to display at the top of a page when a page break occurs?
- The 'widows' CSS property specifies the minimum number of lines to display at the top of a page when a page break occurs. The 'orphans' CSS property specifies the minimum number of lines to display at the bottom of a page when a page break occurs.
Question 28 : The 'unicode-bidi' CSS property is used in conjunction with which other CSS property for handling bidirectional text?
- The 'unicode-bidi' CSS property is used in conjunction with the 'direction' CSS property for handling bidirectional text.
Question 29 : How does the 'outline' CSS property differ from the 'border' CSS property?
- The 'outline' CSS property applies to all sides whereas the 'border' CSS property can be different on all sides.
Question 30 : Are an 'outline' CSS properties dimensions included when calculating an element's width and height?
- An 'outline' is laid on top of an element and and so has no impact on width and height.
Question 31 : What can the 'direction' CSS property be useful for?
- We can set the borders of element content individually or all at once using the 'border' shorthand CSS property.
Quiz Progress Bar Please select an answer

What's Next?

In the next quiz we test our knowledge of the topics covered in the Javascript 1.5 Basics section of the site .

go to home page Homepage go to top of page Top