CSS Syntax Quiz

1. What are the main differences between ID and Class

Classes are for use with spans and ID's are for use with DIVs

ID's are better than Classes

The main difference between ID and Class is that ID's are supposed to be used only once per page, while Classes can be used multiple times per page. Additionally, one element can have more than one Class, but should have only one ID.

Explanation

The main difference between ID and Class is that ID's are supposed to be used only once per page, while Classes can be used multiple times per page. Additionally, one element can have more than one Class, but should have only one ID.

2. DIVs should only use ID's and spans should only use Classes

True

False

This statement is false. In HTML, both DIVs and spans can use either IDs or classes. IDs are typically used to uniquely identify a specific element on a page, while classes are used to group multiple elements together. Both IDs and classes can be used with both DIVs and spans, depending on the specific use case and styling requirements.

Explanation

This statement is false. In HTML, both DIVs and spans can use either IDs or classes. IDs are typically used to uniquely identify a specific element on a page, while classes are used to group multiple elements together. Both IDs and classes can be used with both DIVs and spans, depending on the specific use case and styling requirements.

3. Here we have 4 different blocks of code. Each one contains the text "hello". Which of the following would display without an underline if this rule were in the stylesheet for this page? .leftnav #mylink a {text-decoration:none;} click to see larger

A

B

C

D

Either a or c

The correct answer is "a" because it is the only block of code that matches the CSS rule in the stylesheet, which sets the text-decoration property to none. This rule removes the underline from the text, so only the block of code that matches the rule will display without an underline. The other blocks of code do not have the necessary selectors or properties to remove the underline.

Explanation

The correct answer is "a" because it is the only block of code that matches the CSS rule in the stylesheet, which sets the text-decoration property to none. This rule removes the underline from the text, so only the block of code that matches the rule will display without an underline. The other blocks of code do not have the necessary selectors or properties to remove the underline.

4. What does the following mean to the computer? div p {color: #ff0000;}

Make text in all divs and all paragraphs in this document be bright red

Make the background in all divs that are of the class "p" be bright red

Make the text inside any divs inside of any paragraph be bright red

Make the text inside any paragraph that is inside any div be bright red

The given CSS code "div p {color: #ff0000;}" means that the text inside any paragraph that is inside any div should be colored bright red. This selector targets all paragraphs that are nested within a div element and applies the specified color to their text.

Explanation

The given CSS code "div p {color: #ff0000;}" means that the text inside any paragraph that is inside any div should be colored bright red. This selector targets all paragraphs that are nested within a div element and applies the specified color to their text.

5. What does the following mean to the computer? div.leftnav a, div.bottomnav a {text-decoration:none;}

All of the above

The given CSS code selects all anchor tags that are inside either a div with the class "leftnav" or the class "bottomnav" and applies the style rule "text-decoration:none;" to them. This means that the text inside these anchor tags will not have any text decoration, such as underlining or strikethrough. The code does not specify any IDs, so it is not selecting based on IDs. Therefore, the correct answer is "make the text inside any anchor tags that are inside either a div with the class 'leftnav' or the class 'bottomnav' have no text decoration."

Explanation

The given CSS code selects all anchor tags that are inside either a div with the class "leftnav" or the class "bottomnav" and applies the style rule "text-decoration:none;" to them. This means that the text inside these anchor tags will not have any text decoration, such as underlining or strikethrough. The code does not specify any IDs, so it is not selecting based on IDs. Therefore, the correct answer is "make the text inside any anchor tags that are inside either a div with the class 'leftnav' or the class 'bottomnav' have no text decoration."

6. Look at the following HTML: click to see larger

what is the MOST SIMPLE way that you could make the words "jay's favorite" and only those words red without making any of the other text in the page red as well?

Span {color:#ff0000;}

Li {color:#ff0000;}

Li span {color:#ff0000;}

Div ul li span {color:#ff0000;}

Li, span {color:#ff0000;}

The correct answer is "li span {color:#ff0000;}". This is because the selector "li span" selects the span element that is a descendant of an li element. By applying the CSS rule "color:#ff0000;", only the words "jay's favorite" within the span element inside the li element will be made red, without affecting any other text on the page.

Explanation

The correct answer is "li span {color:#ff0000;}". This is because the selector "li span" selects the span element that is a descendant of an li element. By applying the CSS rule "color:#ff0000;", only the words "jay's favorite" within the span element inside the li element will be made red, without affecting any other text on the page.

7. (this is not strictly about CSS, but what the heck) What is the main difference between a DIV and a SPAN ?

Spans are, by default, inline and DIVs are by default Block

DIVs are, by default, inline and SPANs are by default Block

There is no real difference

Spans can be inside DIVs but DIVs are not supposed to go inside spans

Both a and d

The main difference between a DIV and a SPAN is that by default, SPANs are inline elements and DIVs are block elements. This means that SPANs are typically used for smaller, inline elements within a block of text, while DIVs are used for larger sections or divisions of content. Additionally, SPANs can be nested inside DIVs, but DIVs are not supposed to be nested inside SPANs. Therefore, the correct answer is "both a and d".

Explanation

The main difference between a DIV and a SPAN is that by default, SPANs are inline elements and DIVs are block elements. This means that SPANs are typically used for smaller, inline elements within a block of text, while DIVs are used for larger sections or divisions of content. Additionally, SPANs can be nested inside DIVs, but DIVs are not supposed to be nested inside SPANs. Therefore, the correct answer is "both a and d".