CSS Basics QuizS2C Home « CSS Basics Quiz

The questions in this first quiz on CSS 1/2 are on the topics covered in the CSS Basics 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 Basics Lessons Description Question Range
Lesson 1 - Beginning CSSGathering the tools we need to get started on our journey into the world of CSS.
Lesson 2 - CSS SyntaxUnderstanding the syntax of CSS so we can really get a feeling of how CSS works.1 - 4
Lesson 3 - Styles and StylesheetsIn this lesson we discuss the various styles and stylesheets, their advantages and disadvantages.5 - 7
Lesson 4 - Basic Tag SelectorsReviewing the basic tag selectors that are available for use in CSS.8 -13
Lesson 5 - Styling and Spacing TextStyling text using the color, text-align, text-decoration, text-indent and text-transform CSS properties. Spacing text using the letter-spacing, white-space and word-spacing CSS properties.14 - 17
Lesson 6 - Using FontsGetting the most out of fonts using the font, font-family, font-size, font-style, font-variant and font-weight CSS properties.18 - 21
Lesson 7 - The Box ModelIn this lesson we get to grips with the Box Model and demystify what it means.22 - 25
Lesson 8 - Paddings and MarginsUsing Paddings and Margins in the box model. In this lesson we discuss all the CSS padding and margin properties available.26 - 29
Lesson 9 - BordersHow to use Borders in the box model and their impact on our web pages. In this tutorial we learn all 20 CSS border properties and their uses.30 - 32
Lesson 10 - CSS Basics SummarySummarizing the tutorials in this section.

CSS Basics Quiz

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

Question 1 : A CSS style can be broken down into two main parts, a selector and ?
- A CSS style can be broken down into two main parts, a selector and a declaration group.
Question 2 : What is held within a CSS declaration?
- A CSS declaration holds a property and value.
Question 3 : What symbol is used to terminate declarations?
- Declarations are terminated with a semi-colon.
Question 4 : How many declarations can be held within a declaration group?
- A declaration group must have at least one declaration and can have many more than 1.
Question 5 : What file extension do we use for our external stylesheets?
- The <code>style</code> HTML tag must reside within the opening and closing <code>head</code> tags.
Question 6 : External stylesheets get read in after internal stylesheets?
- External stylesheets get read in first then internal stylesheets and lastly inline styles.
Question 7 : An advantage of external stylesheets is that changes to the stylesheet will be reflected in all pages using that stylesheet?
- Yes this is the greatest advantage of external stylesheets as we can make global changes in one place.
Question 8 : What symbol do we use in CSS styling for the universal selector?
- We use the <code>*</code> symbol (asterisk) for the universal selector in CSS styling.
Question 9 : When we talk about tag selectors, what are we referring to?
- Tag selectors will select each entry of the HTML tag specified for styling.
Question 10 : What symbol do we use in CSS styling for the class selector prefix?
- We use the <code>.</code> symbol (period) for the class selector prefix in CSS styling.
Question 11 : Which of the following is a valid class selector?
- Valid class selectors must be prefixed with a period and start with a letter and contain only letters, numbers and the hyphen and underscore characters.
Question 12 : What symbol do we use in CSS styling for the id selector prefix?
- We use the <code>*</code> symbol (asterisk) for the id selector prefix in CSS styling.
Question 13 : Which of the following is a valid id selector?
- Valid id selectors must be prefixed with a <code>*</code> symbol (asterisk) and start with a letter and contain only letters, numbers and the hyphen and underscore characters.
Question 14 : We use the 'color' CSS property to change the background colour of our text?
- The 'color' CSS property changes the foreground colour of our text, not the background.
Question 15 : Which CSS property changes text to uppercase, lowercase or capitalized?
- We use the 'text-transform' CSS property to change text to uppercase, lowercase or capitalized.
Question 16 : When no values are specified for the text-align property, text alignment is set to left?
- When no values are specified for the text-align property, text alignment is set to left or right dependant upon the default language.
Question 17 : Which CSS property decreases or increases the space between text characters?
- The 'letter-spacing' CSS property decreases or increases the space between text characters.
Question 18 : Which CSS property allows us to use a fallback font for text other than the default applied by the user agent?
- The 'font-family' CSS property allows us to use a fallback font for text other than the default applied by the user agent.
Question 19 : Which CSS property allows us to combine the other CSS font properties into one handy shorthand property?
- The 'font' CSS property allows us to combine the other CSS font properties into one handy shorthand property.
Question 20 : Which CSS property allows us to make text appear in small caps?
- The 'font-variant' CSS property allows us to make text appear in small caps.
Question 21 : We can only set the CSS 'font-weight' property value using a numeric?
- We can set the CSS 'font'weight' property value using a numeric or string literal.
Question 22 : What is the space between the element content and border called?
- The space between the element content and border is called 'padding'.
Question 23 : What is the transparent area around around the border called?
- The transparent area around around the border is called the 'margin'.
Question 24 : What happens when a border is not solid?
- The spaces in the border are filled with the background colour.
Question 25 : The CSS 'background-color' property fills all the space from the margin inwards with the selected colour?
- The CSS 'background-color' property fills all the space from the border inwards with the selected colour.
Question 26 : To guarantee space between elements which CSS property should we use?
- To guarantee space between elements we should use the 'padding' CSS property which doesn't allow negative values. The 'margin' CSS property does allow negative values and so we can actually overlap elements using negative margins.
Question 27 : Imagine the right margin of 25px of element 1 collides with the left margin of 10px of element 2, what will the margin be between these two elements?
- When margins collide browsers take the larger of the two margins as the margin to use, so in our example the answer is 25px.
Question 28 : When working out the total width for an element what should we include?
- When working out the total width for an element you need to include the element width, left and right padding, left and right border and left and right margin.
Question 29 : CSS offers shortcuts for setting margin and border properties but these should only be used in development?
- CSS offers shortcuts for setting margin and borders which should be used wherever possible to make our CSS more readable and concise.
Question 30 : How many different attibutes can we set on a border?
- There are three border attributes we can set: width, style and color.
Question 31 : We can set the borders of element content individually or all at once?
- We can set the borders of element content individually or all at once using the 'border' shorthand CSS property.
Question 32 : What is the preferred order when setting borders using the 'border' shorthand CSS property?
- The preferred order when setting borders using the 'border' shorthand CSS property is width, style, color.
Quiz Progress Bar Please select an answer

What's Next?

In the next quiz we test our knowledge of the topics covered in the CSS Intermediate section of the site .

go to home page Homepage go to top of page Top