CSS Interview Questions

Lately, I have been interviewing many engineers who are interested in a CSS contractor position, and am thoroughly disheartened by the number of candidates who put CSS expert on their resume, but don’ even know the basics of CSS. This article will discuss the ten questions I usually ask, including the answer and why I ask the question. My hope is not to just give the answer, but to educate as well.

Questions

Each question has a point value associated with it and the sum of all points adds up to 12. When I ask the question, I rate the candidate’s answer. They receive positive points for correct or partially correct answers (up to the question’s point value), zero points for lame answer, but not blatantly wrong answers, and negative points for incorrect answers (up to the question’s point value). At the end of the interview I add up all the points. If the score less than an 8, I will pass, an 8-10 I will consider, and a 10+ is a good score.

How do you setup your CSS to minimize cross-browser issue? (1 point)

This question explores the candidate⁏s understanding of the CSS development ecosystem, how up-to-date on CSS technology they are, and if they have any bad habits.

The best answer is to apply a set of normalization CSS1, ensuring the standard elements have a consistent default behavior across all browsers. For bonus points they may mention that it is a good idea to create a baseline CSS file setups the default element and class behavior for their project.

Alternatively, they may mention using a CSS framework, which takes care of cross-browser issues. It’s best if the candidate understands what the framework is doing to normalize, but I will let this kind of answer slide. They may also use * to target all elements and reset padding, margins, etc., but this is over-broad and inefficient.

Sometimes candidates will say they use browser specific CSS files and various methods for targeting each browser (usually using the user agent). It is never good to use the user agent, and this should always be a last resort. This answer is not acceptable. It is okay to occasionally use IE conditional comments, if the candidate understands they should be used sparingly and only if normalization does not work.

Create a CSS rule that removes the default underline applied to anchor elements, and then create a rule restoring the underline on hover (followup: are there issues with using hover on non-anchor elements or ask about other pseudo classes). (1 point)

This question will show the candidate understands the basics of CSS and has some knowledge of a commonly used property. Additionally, they have used and basically understand pseudo classes.

        a {
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        

Sometimes candidates will understand how to target anchors and apply the hover pseudo-class, but not know the text-decoration property and use some bogus property instead. I won’t give zero points if they use the wrong property, but correct selectors.

How would you center a block level element inside it’s parent container? (1 point)

This question will show the candidate understands how to center block level elements, which is commonly used to center a website on a page. This question tends to trick people up and separates good CSS engineers from poor ones.

CENTER ME

The candidate needs to know the margin property and a width property are required. The element needs a width smaller than the parent container for this to work (otherwise, it will fill the available width by default and apply no left/right margin). I may give a bonus point if they know the cross-browser CSS to center a page (IE < 6):

        body {
            text-align:center;
        }
        a:hover {
            margin:0 auto;
            text-align:left;
            width: 980px;
        }
        

Usually, candidates answer this wrong by trying to use the properties text-align or position, or JavaScript. All of these answers get negative points.

What is the difference between visibility:hidden and display:none? (1 point)

Both of these properties will be used frequently in DOM scripting and it is important the candidate understands how both behave, so they use them correctly.

Using display:none will cause elements to render as if the element and its content does not exist on the page. Removing display:none or applying another display will cause the page to reflow. While visibility:hidden will cause the element to be invisible, but the element and its content will flow normally.

What are three different ways to write the color property to set it to blue (followup: which way do you prefer and why)? (1 point)

This checks if the candidate understands the three ways to apply color rules, and the followup ensures they know the correct way to do it.

The following CSS shows the five different techniques for applying color (but the three key answers are: by name, hex, and rgb). They should prefer using rgb or hex values, because they have more control over which flavor of the color they really want to use and not be dependent on the browser defaults (browser support of named colors is no longer an issue). I may give a bonus point if they know the hex short-hand and rgba without prompting.

        div {
            color:blue;
            color:#0000FF;
            color:#00F;
            color:rgb(0,0,255);
            color:rgba(0,0,255,1);
        }
        

I will not give any positive points if they don’t listen and apply a color other than blue; it indicates the candidate is a poor listener.

Write a selector to apply 5px padding to all input elements of type text? (1 point)

Shows the candidate has experience with more advanced selectors. I sometimes write a form with a text and button input to illustrate this question.

        input[type=text] {
            padding: 5px;
        }
        
What color will the text inside the div be? (2 point)
        <div class="foo" id="bar" style="">Color?</div>
        <style>
            div {color: red;}
            #bar {color: green;}
            .foo {color: blue;}
        </style>
        

Does the candidate understand how specificity2 rules apply to a single element.

The id attribute is more specific than class is more specific than element, so the text will be green.

Any answer talking about order of attributes or order of rules in the stylesheet automatically gets zero or less points, as order of attributes has nothing to do with specificity and order in stylesheet only applies to rules with the same specificity.

If an element has an inline style making it red, how can you override it in your CSS file (followup: when should you use this technique)? (1 point)
        <div class="foo" id="bar" style="color:blue">Make Me Red</div>
        <style>
            div {color: red;}
            #bar {color: green;}
            .foo {color: blue;}
        </style>
        

Does the candidate understand that inline styles are the most specific, but they can be overwritten using the important declaration.

Adding the !important declaration will supersede the specificity rules, except versus other properties with the !important declaration. However, it prevents other CSS rules from modifying the property, so !important should be used rarely, if at all.

            div {color: red!important;}
        
Which of the following is the most specific (what color is the text and why)? (2 point)
        <div class="bar">
            <span class="foo">
                Which color am I and why?
            </span>
        </div>
        
        div .foo {color: red;}
        .bar span {color: green;}
        span.foo {color: blue;}
        

This is a more advanced specificity2 question, it ensures the candidate understands specificity and knows the last rule applies when rules have the same specificity.

This is kind of a trick question, because all three rules have exactly the same specificity so the last rule applies and the color is blue. All three rules have one element and one class in the selector.

Sometimes the candidate will get the right answer for the wrong reason. It is important they understand each rule has exactly the same specificity and the last rule applies for that reason only.

Which of the following produces more maintainable and scalable CSS and why? (1 point)

A)

        <ul class="myList">
            <li></li>
            <li></li>
            …
        </ul>
        
        .myList {
            /* list styles here */
        }
        .myList li {
            /* list item styles here */
        }
        

B)

        <ul class="myList">
            <li class="myList-item"></li>
            <li class="myList-item"></li>
            …
        </ul>
        
        .myList {
            /* list styles here */
        }
        .myList-item {
            /* list item styles here */
        }
        

Has the candidate worked on a large CSS project before or do they understand SMACCS3 principles.

While A may produce more concise JavaScript, B is better on large, shared projects for the following reasons:

  1. The CSS parser and renderer processes rules from right to left, so longer selectors require more tree traversals causing the page to render slower.
  2. Using all classes separates the design from the markup, so the markup can be changed to different elements later or used in other places, without having to change the CSS.
  3. There are no accidental style inheritances to prevent, as happens most often when nesting lists or tables.

I may only give zero points, instead of negative points if they choose A, but can come up with some good reasons, such as they like to namespace styles or they use a CSS preprocessor.

Conclusion

These are the questions I like to ask CSS-focused candidates and I think they demonstrate if the candidate has good understanding of CSS and related principles. Additionally, this article should be used as a training tool for anyone needing to come up to speed on CSS. I have included links below for concepts that were beyond the scope of this article. Please let me know if you need more explanation or if any of my answers are confusing.


References

  1. Normalize CSS
  2. Specificity
  3. Scalable and Modular Architecture for CSS