CSS Advanced Quizzes

Advanced CSS Quiz 1

The questions in this first advanced quiz on CSS are on the topics covered in the first three lessons of the CSS Advanced section of the site. The table below lists the lesson used for each quiz, a description of the lesson content and the quiz number and questions associated with that lesson.

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 Quiz Info.
Lesson 1 - Generated ContentUsing Generated Content and letting the browser insert information into our pages.This quiz.
10 questions
Lesson 2 - Attribute SelectorsA look at attribute selectors and how we can use them to select HTML elements.
Lesson 3 - Styling ListsA look at how to style our lists using some useful CSS properties.
Lesson 4 - Styling TablesFor this lesson we look at the CSS properties we can use with out HTML tables.Quiz2
10 questions
Lesson 5 - NavigationA look at how to style navigation bars to look good on our web pages.
Lesson 6 - LayoutIn this lesson we look at how to create page layouts for our websites.Quiz3
11 questions
Lesson 7 - The Printed PageA look at how to style our data so it is suitable for printing.
Lesson 8 - Other PropertiesA look at the CSS properties we haven't covered so far - direction, outline and unicode-bidi.

CSS Advanced Quiz 1

The quiz below tests your knowledge of the material learnt in the first three lessons of 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 <code>content</code> 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 <code>counter-increment</code> and <code>counter-reset</code> respectively increment and reset one or more counters using the CSS <code>content</code> 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 <code>quotes</code> 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 <code>list-style-type</code> property in association with the CSS <code>list-style-image</code> 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 <code>list-style-type</code> 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.
Quiz Progress Bar Please select an answer

What's Next?

In the next quiz we test your knowledge of the topics covered in the fourth and fifth lessons of the CSS Advanced section of the site .