Menu

15 CSS Questions to Test Your Knowledge


How well do you know CSS? Test your knowledge by trying to answer the CSS questions in this post.

The questions are divided into three categories:

  1. Basic CSS questions
  2. Intermediate CSS questions
  3. Advanced CSS questions

This set of CSS questions is a follow-up to our previous collection of HTML questions. (Check that out too.)

There’s no time-limit or score-tracking. After you complete these fifteen challenging questions, feel free to talk about your results in the comments.

Basic CSS Questions

Question 1

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

  • dotted
  • inset
  • glazed
  • groove
  • solid

See the answer

Answer

glazed

Visual guide of border-style property values - w3.orgSource: 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.

Question 2

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

  • cm
  • dm
  • em
  • mm

See the answer

Answer

dm

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

Question 3

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

See the answer

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?

Question 4

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

See the answer

Answer

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.

Question 5

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

  • olive
  • fuchsia
  • cyan
  • aqua
  • maroon

See the answer

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

Question 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?

See the answer

Answer

oblique

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

Related: CSS Typography: The Basics

Question 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

See the answer

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

Intermediate CSS Questions

Question 8

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

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

See the answer

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

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

Question 9

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

  • content
  • padding
  • margin
  • outline
  • border

See the answer

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

Question 10

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

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

See the answer

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.

Question 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
  • ?
  • ?

See the answer

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

Question 12

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

See the answer

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

Advanced CSS Questions

Question 13

Which of the following is NOT a valid CSS unit?

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

See the answer

Answer

ems

Question 14

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

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

See the answer

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.

Question 15

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

See the answer

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.

How many questions did you answer correctly? Which questions gave you a tough time? Share your thoughts in the comments.

Updates

Related Content

Alexander Dawson is a web designer/developer and book author specializing in web standards, accessibility, and UX design. Learn more about him over at his personal site, HiTechy.

This was published on Jun 3, 2015

24 Comments

hellboy Jun 04 2015

Turns out I’m not even any good as basic CSS! Good article though, I learned quite a bit from this.

    Jacob Gube Jun 04 2015

    I want to point out that this doesn’t test your CSS skills/abilities. I’m sure there are loads of CSS authors who create perfectly great sites without being able to answer any of these questions. It perhaps just tests how deeply familiar you are with CSS specifications/technical standards. Many of these questions, in my opinion, are hard to answer without Google searches. Even the basic questions.

      The color questions are ridiculous – namely question 14. How is knowing “blanchedalmond, dodgerblue, peachpuff, navajowhite, tomato” helpful in any instance?

      Jacob Gube Jun 17 2015

      @Fran: You have a good point. I replied to a similar thought below.

      More than anything, it tests how familiar you are with W3C CSS standards and specifications. Does knowing all the color keywords by heart mean a person is good/not good at designing/building sites? No. There’s Google and references for these types of stuff.

MrPapercut Jun 04 2015

About the LVHA acronym: it’s easier to remember LoVe For HAte (:link, :visited, :focus, :hover, :active)

    Jacob Gube Jun 04 2015

    Good tip.

    Nimsrules Jun 05 2015

    Just as TROUBLE for Top, Right, Bottom, Left for margin and padding shorthands

      Jacob Gube Jun 06 2015

      Great tip! I’ve never heard of this one. TRBL does sounds like “trouble”.

nuhu a adamu Jun 04 2015

Very good questions, I answered 3 out of of the 15.

Connor Jun 05 2015

Those questions were hard! I got 9 out of 15, but a couple of those were guesses based on stuff I didn’t recognize rather than actual knowledge. Interesting stuff though.

    Jacob Gube Jun 06 2015

    That’s a great score! A potential idea I just had was, in the future, when we do another post like this, we’ll to do a sort of aggregated/anonymous score-tracking. It’ll be opt-in, where you’re first asked if we can anonymously keep track of your score. This allows us to display the average score for comparative purposes.

    But just my gut-feel, 9/15 is a very high score for these challenging questions.

zymara Jun 05 2015

Too much focus on named colors – it has never been a good practice to use the named colors due to inconsistent browser support. Just use hex colors and you’ll always be cross-browser safe. :^)

    Jacob Gube Jun 06 2015

    That’s a valid viewpoint.

    What I’m hearing you say is: There’s little practical/real-world benefit to memorizing named colors/color keywords. There’s also no practical benefit in being able to discern if a color keyword is a basic color or an extended color.

    And I agree with that sentiment. If you really need to know a specific color name, you can quickly look it up.

    And what’s the probability that your project’s success or skills as a developer will depend on knowing all the color keywords and color keyword category. As long as you know there are CSS color keywords, and that there’s a lot of them, you already know what you need to know regarding that topic.

    What you’ve said is important. And it’s something I need to take a note of because I want Six Revisions to be known as a place where you go to learn about practical, applicable, useful web design/development information, techniques and tips.

    Oh, and another benefit you get when you use numerical CSS color values (whether hex or RGB or HSL) as opposed to color keywords/named colors is you have finer control. You can be very specific with the color’s properties (shade, brightness, lightness, saturation, etc.).

    In addition, numerical color units allow more flexibility when it comes to programmatic manipulation. For example, you can adjust color properties based on certain events or situations using JavaScript and hsl() and/or hsla().

    Right now, I really can’t see a benefit to using color keywords as opposed to numerical CSS color units. If you know of a good reason/s, please share it with me because I’d like to know.

nice questions!
I wonder if opacity: 0 could be another valid answer for question 4?

    Jacob Gube Jun 06 2015

    Great catch Carl! Thank you for letting us know about this.

    To verify that opacity: 0 behaves as described by Question 4, I created a test case on JS Bin: http://jsbin.com/qagaqaxiba/2/edit?html,css,output

    The test case set-up is as follows:

    • There are 9 divs. They’re labeled #a, #b, #c, […], #i
    • divs #a, #e, #i were assigned opacity: 0.
    • If opacity: 0 DOES what Question 4 describes, there must be empty/blank areas where divs #a, #e, and #i are.
    • If opacity: 0 DOES NOT do what Question 4 describes, the divs will make the page “reflow” and will behave just like display: none. This means div #b will shift to where div #a was, div #c will shift to where div #b was, and so forth.

    The result of the test case is that opacity: 0 DOES what Question 4 describes.

    Here’s an animated visual for comparative purposes:

    Animated visual

    We’ll be correcting this article as soon as possible.

      Lee Kowalkowski Jun 11 2015

      Except!!! If such elements were interactive (e.g. links) then you’d still be able to interact with them if you used opacity to ‘hide’ them.

    Jacob Gube Jun 06 2015

    The post has been updated. Thanks again Carl!

Magendiran Jun 08 2015

I scored 11 out of 15 and from 11 to 14 its bit tough to guess also… very nice article. I am good in CSS but looking at this i came to know i have to learn more still…

    Jacob Gube Jun 08 2015

    It’s great to see such humility and an undying thirst for self-betterment. 11/15 is a more-than-excellent score in the context of these CSS questions, yet you still saw room for improvement. Keep in touch.

Cierra Luke Jun 11 2015

I am new to web designing and development, only 7 questions were correct. I feel that I have to learn a lot to become a professional. I am very thankful for your effort. I think such questions should be a part of online web designing blogs to help all user to judge their knowledge.

Karthik Jun 17 2015

Very Nice Article. . I got 11 out of 15.

I have a small doubt. . how can we set the zoom of a page to 75% but still keep the page in center using css?

Ahsan Idrisi Jun 18 2015

I gave 6 answers correct

Nathan Dailo Jul 02 2015

I got 12/15. Colors gave me trouble, and the ems got me! Totally forgot its just em. Ha!

This comment section is closed. Please contact us if you have important new information about this post.

Partners