15 CSS Questions to Test Your Knowledge

Answer

glazed

Source: w3.org

You can see all the border-style property values by reading the “4.2. Line Patterns: the ‘border-style’ properties” section in W3C CSS Backgrounds and Borders Module Level 3 specs.

Answer

dm

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

Answer

The universal selector (*).

An example: The following style rule uses the universal selector to set the margin and padding of all HTML elements to zero:

* {
  margin: 0;
  padding: 0;
}

Related: Should You Reset Your CSS?

Answer

visibility

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.

See MDN’s documentation of the CSS visibility property to learn more about this property.

One other way of hiding an element is by setting its display property to none. Doing this renders the element as though it doesn’t exist.

Answer

cyan

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

The cyan color keyword is documented as being part of the extended color keywords.

Related: Introduction to CSS Colors

Answer

oblique

Read the font-style docs on MDN to learn more about this CSS property.

Related: CSS Typography: The Basics

Answer

Selector 1:

#object h2:first-letter

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

Related: How CSS Specificity Works

Answer

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

An element can match multiple pseudo-class selectors at the same exact time. That is the reason why the order of the pseudo-classes above is crucial.

We know that if two selectors are equal in specificity, by default, the selector farther down the stylesheet wins.

One situation where you can clearly see this issue is via a hyperlink element. Suppose that you hover your mouse pointer on the link, and then click on the link without moving your mouse afterwards. This situation means the link matches both :hover and :active selectors.

So if the :active style rule is above the :hover style rule — for instance — users will never get to see the :active style rule applied. This is because the :hover style rule will always overwrite it.

You can remember the ideal order by memorizing the acronym, LVHA. Link → Visited → Hover → Active

Related: To learn more about this subject, read CSS Link Pseudo-classes. Also, find out why the :visited pseudo-class is weird.

Answer

outline

Here’s a portion of the outline property’s specifications:

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.

18.4 Dynamic outlines: the ‘outline’ property

Answer

voice

You can find all the valid media types in the Media Queries W3C specs. voice is not a valid media type. Though there is a speech media type.

Answer

• cursive
• fantasy

Learn about the generic font families in greater detail by reading “3.1.1 Generic font families” in CSS Fonts Module Level 3.

Related: The Essential Guide to @font-face

Answer

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.

Read “4.4. currentColor color keyword” in the CSS Color Module Level 3 to learn more about this color keyword.

Slightly related: Introduction to CSS Variables

Answer

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.

Answer

orchidblack

See section “5. Named Colors” of the CSS Color Module Level 4 Editor’s Draft to find all the current proposed color keywords.

Answer

@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.

See this guide to learn more: Declaring character encodings in CSS.