Apps

CSS interview questions and answers

Development hiring managers and potential interviewees may find these sample CSS proficiency interview Q&As and code snippets useful.

The first iteration of Cascading Style Sheets (CSS) was not met with open arms, as lack of support was widespread. Times have changed, and CSS is now an integral part of all Web applications, so it is imperative to have designers and developers with strong CSS skills to produce a polished product for clients. Finding the right person with those skills can be tricky. Here's a look at possible interview questions for CSS candidates. These questions are not comprehensive, but they do provide a starting point for evaluating individuals.

Note: This content is also available as a downloadable PDF.

What is CSS?

CSS is a standard for applying style to HTML elements. This styling includes margins, positioning, fonts, colors, and so forth. The styling can apply to the complete document or be granular and apply to a specific element. Theoretically, the use of CSS promotes the separation of content and design, allowing the designer to focus on how a Web application will look while the developer(s) concentrate on the structure and functionality.

The main part of CSS is a rule. A rule consists of a selector (i.e., what will be styled) followed by a declaration (i.e., the style to be applied) that is broken into one or more properties and associated styles. In the following example, h1 is the selector, followed by the color property and the style of blue.

h1 {color: blue;}

What does the cascading portion of CSS mean?

Cascading refers to cascading order. It is a system of sorting the various CSS declarations to avoid conflicts. The process begins with a search for all declarations that apply to specific elements; it ends if no match is found. Cascading occurs if multiple styles are defined for an element. In general, values will be applied from the more specific style sheet. This could be its own article, so please refer to my CSS 101 TechRepublic post for more details.

Note: CSS properties take precedence of HTML attributes, but the HTML attributes will be used when/if a browser does not support CSS.

Is CSS case-sensitive?

The CSS standard is not case-sensitive, but if an XHTML doctype is used, then CSS class names will be case-sensitive in some browsers. In addition, items like font families, image URLs, and other direct references with the style sheet can be case-sensitive. To be safe, you should stick with lower-case to avoid confusion or unexpected problems.

What are different ways to apply styles to a Web page?

There are four ways to integrate CSS into a Web page (some consider items three and four the same):

  1. Inline: HTML elements may have CSS applied to them via the STYLE attribute.
  2. Embedded: CSS may be embedded in a Web page by placing the code in a STYLE element within the HEAD element.
  3. Linked: CSS may be placed in an external file (a simple text file containing CSS) and linked via the link element.
  4. Imported: Another way to utilize external CSS files via @import.

What is an ID selector?

An ID selector is a name assigned to a specific style. In turn, it can be associated with one HTML element with the assigned ID. Within CSS, ID selectors are defined with the # character followed by the selector name. The name can contain characters a-z, A-Z, digits 0-9, period, hyphen, escaped characters, and so forth.

The following snippet shows the CSS example1 defined followed by the use of an HTML element's ID attribute, which pairs it with the CSS selector.

#example1: {background: blue;}
<p id="selector">...</p>

What is a class?

A class is a style (i.e., a group of CSS attributes) that can be applied to one or more HTML elements. This means it can apply to instances of the same element or instances of different elements to which the same style can be attached. Classes are defined in CSS using a period followed by the class name. It is applied to an HTML element via the class attribute and the class name.

The following snippet shows a class defined, and then it being applied to an HTML DIV element.

.classexample {font-family: Helvetica; font-size: 20; background: black;}
<div class="classexample">....</div>

Also, you could define a style for all elements with a defined class. This is demonstrated with the following code that selects all P elements with the column class specified.

p.column {font-color: black;}

What is the difference between an ID selector and CLASS?

An ID selector identifies and sets style to only one occurrence of an element, while CLASS can be attached to any number of elements.

What is contextual selector?

Contextual selector addresses specific occurrence of an element. It is a string of individual selectors separated by white space (search pattern), where only the last element in the pattern is addressed providing it matches the specified context.

What is grouping?

When more than one selector shares the same declaration, they may be grouped together via a comma-separated list; this allows you to reduce the size of the CSS (every bit and byte is important) and makes it more readable. The following snippet applies the same background to the first three heading elements.

h1, h2, h3 {background: red;}

What are child selectors?

A child selector is used when you want to match an element that is the child of another specific element. The parent and child selectors are separated by spaces. The following selector locates an unordered list element within a paragraph element and makes a text within that element bold.

p > ul {font-weight: bold;}

What are pseudo classes?

Pseudo classes allow you to identify HTML elements on characteristics (as opposed to their name or attributes). The classes are specified using a colon to separate the element name and pseudo class. A good example is the :link and :visited pseudo classes for the HTML A element. Another good example is first-child, which finds an element's first child element.

The following CSS makes all visited links red and green, the actual link text becomes yellow when the mouse pointer is positioned over it, and the text of the first element of a paragraph is bold.

a:link {font-color: red;}

a:visited {font-color: green;}

a:hover {font-color: yellow;}
p.first-child {font-weight: bold;}

What does the following CSS do?

P {font-family: Verdana, Arial, Helvetica;}

The CSS sets the font for the P element. If available in the browser, Verdana is used. If Verdana is not available, Arial is used. If Arial is not an option, Helvetica is utilized.

How do you include comments in CSS?

Anything placed between /* and */ in CSS is considered a comment. Comments are ignored by the browser.

Have you utilized any CSS libraries or frameworks?

The answer to this question will not be standard, but it gives you an idea of a candidate's familiarity with the landscape. Possible answers include the YUI Library or YAML, but there are plenty more out there.

What do you see in the future of Web design?

This is an open-ended question that is purely subjective, but I want to hear the candidate discuss the explosion of non-standard devices such as phones, video game consoles, and so forth. These new platforms are changing how sites are designed. The candidate gets extra credit if they drop the phrase "responsive design."

Are you pro or against Flash?

The argument for and against Adobe Flash continues as HTML5 offers better and leaner ways to do the same thing, so this question allows you to hear the candidate's feeling on the subject and lets you know how well they keep up with industry buzz or trends.

More in our development interview Q&A series

Keep your engineering skills up to date by signing up for TechRepublic's free Software Engineer newsletter, delivered each Tuesday.

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

0 comments

Editor's Picks