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

Hoisting 102 - Examining a Global Context Hoisting Gotcha

In an earlier article we covered Variable Hoisting in JavaScript. At the time, I did not expect to face a hoisting related code bug so quickly. And given the circumstances of the bug, I expect it to be one of the most common hoisting problems, so I wanted to share it.

How do it…

Let’s jump right into the setup. You have a function that is defined in one JavaScript file (this file ...

jQuery Widget for Dynamic Input Helper Text

This is a proof of concept widget that I demoed for work. The desire is to update some text according to a regex and replacement, when an input field changes. This will allow developers to show a message and/or format the input value, so users understand they do not need to enter meta characters and see the result of their input (think phone or identification numbers). I built a simple jQuery plugin that can be ...

Cross Browser Rounded Corners Using VML

Hopefully, your job does not have to support corporate customers whose IT departments do not keep the companies browsers up-to-date, and therefore do not need to support older version of IE. If however, like me, you need to support older IEs, then your companies designers have probably asked you to support rounded corners in IE. The three most common techniques to solve rounded corners are to use JavaScript [1] or an HTC Access[2] ...

Using jQuery Mobile With Django HTML5 Boilerplate

In the last article, I introduced the Django HTML5 Boilerplate package, which incorporates HTML5 Boilerplate into an easy to use Django package. Today’s article will take that one step further by showing how to use DH5BP to create a base template for your HTML 5 mobile app. We will be using jQuery mobile and the jQuery Widget for Showing Add To Home Message on iOS.

Getting ready

Install Django ...

Django HTML5 Boilerplate

I am a big fan of the HTML 5 Boilerplate project, and in that past, I have made some half-hearted attempts to incorporate it into a reusable Django module. I think the problem with my attempts and the other attempts that I have found recently on the web is that nobody automated the process of converting H5BP into a django module, so each time H5BP is updated (which happens frequently), somebody has to ...

Using PhantomCSS for Regression Testing Your CSS

I finally had a chance to play with PhantomCSS, a CSS regression testing tool that compares screenshots to see if CSS changes have affected the design, and wanted to share my experience with you. We are using it at Ariba to validate that I do not break any designs as I migrate us from two giant, unmanageable CSS files into smaller, modularize and better written lessCSS files. PhantomCSS uses

jQuery Widget for Showing Add To Home Message on iOS

I recently wrote an article discussing Making HTML5 Apps Appear Native on iOS where I mentioned building a widget for telling the users to add your application to the home screen. This article introduces a simple jQuery plugin that can be used to show the Add to Home message on an iOS device. It is fully customizable, but looks good right out of the box.

Getting ready

Download the plugin at the

Rotating Multi-State Button

One of the designers at Ariba, recently came up with a design that needed a tri-state button to govern toggling some content. We came up with an interesting solution where the button has three colors on the outside, with the bottom color governing the content being shown. I am not sure if the widget will survive a usability study, but I put together a proof of concept using HTML 5 technologies and wanted to share ...

Python Script for Automatically Copying Modified Files

I had a situation at work where I needed to copy static resources from one directory to another, any time they changed. A simple symlink wouldn’t do, because the destination location was on a shared drive, and not all users would have access to my machine. Although, there are existing solutions for this problem, it seemed a simple enough problem to write my own python script. Today’s article will describe my python script for monitoring ...