CSS Practice Quiz

What does CSS stand for?

• Casting Style Sheets

• Cascading Style Sheets

• Computer Selector Sheets

• Cascading Style Selectors

CSS rules are specified using selectors. What are the three possible selectors we have learned about in class?

• html element (aka "tag"), class, and id

• html element (aka "tag"), class, and style name

• class, style, and id

• div, class, and id

Styling with CSS rules is more scalable than using a style attribute on each HTML tag that you want to style

• True

• False

Answer explanation

Styling individual elements using the style attribute is not very scaleable because if you wanted to change the style down the road, you would need to change it on every single element.

A CSS rule is comprised of:

• a CSS selector and one or more declarations enclosed by curly braces.

• a CSS selector and one single declaration enclosed by curly braces.

• a CSS selector and one or more declarations enclosed by parentheses.

• an HTML tag name and one or more declarations enclosed separated by commas.

Answer explanation

The syntax of a CSS rule is shown here and as follows:

The selector comes first followed by an open curly brace. Then, each declaration is listed separated by semi-colons. Finally, the rule is terminated by a closing curly brace.

What is a CSS declaration?

• The key-value pair of a CSS variable and its value. The variable name and value are separated by a semi-colon.

• The key-value pair of a CSS property and its value. The property name and value are separated by a colon.

• The key-value pair of a CSS property and its value. The property name and value are separated by an equals sign.

• The key-value pair of a CSS class and its definition. The class and definition are separated by curly braces.

Answer explanation

A CSS declaration is a combination of a property and a value separated by a colon. For example, in this code snippet, font-size is a property and 36px is a value.

You can have multiple declarations for each CSS rule.

Which of the following is a valid CSS rule?

• 
• 
• 
• 

Answer explanation

This is an example of valid CSS rule syntax.

Remember, property names can only be one word, and they cannot start with a number.

Which of the following code snippets will select all <p> tags on a page and give them a font color of red?

• 
• 
• 
• 

Answer explanation

This is an example of valid CSS rule syntax.

Remember, putting a style attribute on ONE element (aka an "inline style") does not change the style for EVERY element on the page. You must create a CSS rule to do that.

Given this code snippet, what font color will be used to display the text "Welcome" in the browser?

• Green

• Red

• Neither green nor red; there is a conflict

Answer explanation

Class selectors have a higher priority than element selectors, therefore the values specified in the rules for .fire will override values specified in the rules for h1

Given this code snippet, what font color will used to display the text "Welcome" in the browser?

• Green

• Blue

• Neither green nor blue; there is a conflict

Answer explanation

There is no CSS rule for a class called title, only for an ID named title.

Therefore the attribute class="title" on the p tag will be ignored.

If the p tag contained the attribute id="title" then the rule for #title would be applied.

Which piece of punctuation is missing from this code snippet?

• }

• ;

• " "

• -

Answer explanation

CSS properties cannot be two words. The correct property is font-size.