15 Essential CSS Questions:

1. Which of the following is NOT a valid border-style property value?

• dotted
• inset
• glazed
• groove
• solid

 Ans:  glazed

 

2. Which of the following is NOT a valid CSS length unit?

• cm
• dm
• em
• mm

Ans: dm
cm and mm are absolute length units. em is a font-relative length.

3. What is the CSS selector which allows you to target every element in a web page?

Ans: The universal selector (*).

4. Which CSS property allows you to hide an element but still maintain the space it occupies in the web page?

 Ans: visibility or opacity

There are several ways to hide an HTML element with CSS.
Setting the visibility property of the element to hidden will hide the element. The element will still occupy space equal to its geometric size in the web page. For example, if the hidden element’s dimensions are 100x100px, you will see an empty 100x100px space in the area where the element is located. Hiding an element can also be accomplished by assigning opacity: 0 to an element.
Hiding an element without maintaining the space it occupies in the web page can be done by setting the element’s display property to none. Setting display to none renders the element as though it doesn’t exist.

 5. There are 16 basic color keywords in CSS. Which of the following are NOT basic color keywords?

• olive
• fuchsia
• cyan
• aqua
• maroon

 Ans: cyan
cyan is a valid color keyword. But it’s not one of the basic color keywords.

6. The font-style CSS property has four different valid values. Three of these values are inherit, normal, and italic. What is one other valid value?

Ans: oblique

7. Which of the following two selectors has a higher CSS specificity?

Selector 1:

#object h2::first-letter

Selector 2:

body .item div h2::first-letter:hover

Ans: Selector 1: #object h2:first-letter

The specificity value of Selector 1 is 102. The specificity value of Selector 2 is 24.

 8. What is the ideal order of the following pseudo-class selectors in a stylesheet?

• :active
• :hover
• :link
• :visited

 Ans:

1. :link
2. :visited
3. :hover
4. :active

9. Which of the following CSS properties DOES NOT influence the box model?

• content
• padding
• margin
• outline
• border

 Ans: outline

The outline created with the outline properties is drawn “over” a box, i.e., the outline is always on top, and does not influence the position or size of the box, or of any other boxes. Therefore, displaying or suppressing outlines does not cause reflow or overflow.

10. When using media queries, which of the following is NOT a valid media type?

• tv
• all
• voice
• print
• braille
• tty
• embossed

 Ans: voice

voice is not a valid media type. Though there is a speech media type. 

11. There are five generic font family values that can be assigned to the font-family property. Three of them are listed below. What are the other two generic font family values?

• serif
• sans-serif
• monospace
• ?
• ?

 Ans:

• cursive
• fantasy

12. What is the color keyword that will always be equal to the calculated color property value of the selected element/elements?

Ans:   currentColor

Below is an example where the background-color and the border color will be equal to the color property value of .box elements:

.box {
  color: green;
  background-color: currentColor;
  border: 1px dashed currentColor;
}

The benefit of using the currentColor keyword is that we only need to change the color value in one place. We can just change the value of the color property, and the change will cascade to the other properties. This keyword works much the same way as CSS variables.

13. Which of the following is NOT a valid CSS unit?

• ch
• turn
• px
• ems
• dpcm
• s
• hz
• rem

 Ans: ems

• ch and rem are font-relative length units.
• turn is an angle unit.
• px is an absolute length unit.
• dpcm is a resolution unit.
• s is a time unit.
• hz is a frequency unit.

14. Which of the following color keywords has NOT yet been proposed in a W3C specification?

• blanchedalmond
• dodgerblue
• peachpuff
• orchidblack
• navajowhite
• tomato

Ans:  orchidblack

15. What is the CSS at-rule that can allow you to define the character encoding of a stylesheet?

Ans:   @charset

UTF-8 should always be used as your CSS file’s character encoding. If this is the case, then you don’t need to declare a @charset rule.