CSS T Shirt by Dan HoranEmployers have a tough time reeling in the best front-end developers, those who combine skills in Cascading Style Sheets (CSS), HTML and JavaScript to create dynamic websites. But while many managers see these skills as a "three-legged stool," CSS is getting more attention. “You can’t be competitive online these days if you are weak in the CSS department. It is absolutely critical," says Donald DeSantis, a user experience designer and partner at Seattle-area consulting firm LIFFFT. Not having it "limits your ability to deliver these rich, aesthetically pleasing, well-designed Web experiences that now are a criterion to be competitive in the market.” Naturally, employers want to gauge your skill level with CSS. To do so, they'll often start with questions on the basics, then become much more specific. Here's a sampling of the questions some IT employers are asking.

What is the difference between display block, block-inline and inline?

This tests your understanding of the CSS "box" model, and typically leads to a discussion about more advanced concepts, such as margins vs. padding or floating layout vs. absolute/relative positioning.

In what order do CSS style definitions take priority?

Obviously, a deeper one. You'll need to know all of the places where CSS can be defined --  inline styles, same document, external CSS file, default browser styles and user styles, says Aleksey Sanin, vice president of engineering for San Francisco-based online payments service WePay. The next key thing is to understand CSS selectors and how they affect priority. Of course, the "!important" keyword comes into discussion, as well, and leads to the question of best practices, such as not using the "!important" keyword because it's a hack.

What is your Web design experience as a whole?

“Ultimately I'd like to get a big picture of how well the candidate understands how CSS is applied both as a layout framework and a styling mechanism for HTML elements,” says Jon Walker, director of New Media Services at AristoWorks, a Nashville-based Internet marketing and Web development company.

Are you currently using any of the CSS3 specifications in development?

In recent years the W3C has been taking more of a modular approach in specifying new features. It's important for you to demonstrate that you understand their benefits and drawbacks if you in fact want to include them in a product, says Walker.

Are you familiar with Web standards?

Of course, you have to understand design standards. But you also have to show that you're continually educating yourself. Having a myopic approach will ensure that your software becomes quickly outdated and leaves some populations with a poor online experience.

How do you test your CSS layouts?

Considering that users will view your work from a variety of configurations, it’s not enough to just open your work in your favorite browser. “I will take a programmer that is a little less knowledgeable with futuristic tricks and techniques (but) has a solid testing regime that helps keep the angry customer emails and embarrassing issues at bay,” Walker says.

What is the best way to collapse tables in responsive design, using only CSS?

Responsive design lets you write code so it works on a desktop browser, an iPad and mobile phone. Though it requires writing more CSS, that doesn’t mean more HTML – you don’t have to create a mobile website. But responsive design can be tricky when it comes to data in a table. “A lot of people would come up with a JavaScript solution, but I would like to see a candidate talk about using data table and data row display attributes in CSS to collapse down a wide, six- or eight-row table into something that looks great on a mobile phone,” says LIFFFT's DeSantis. “It displays a more advanced understanding of how responsive design works, the limitations of if as well as an understanding of some of the more obscure CSS3 attributes and selectors.”

How would you design a grid system using a CSS language like SASS or Stylus?

“CSS can be very long-winded, so using a language like SASS or LESS writes code that generates CSS for you – you can do a lot of shorthand stuff,” observes DeSantis.  “So I would want to see them write a function that automatically generated all their rows, columns, gutter width in probably a dozen lines of code or less. And it would need to be fully responsive so it could handle everything from a desktop browser all the way down …” Beyond showing that you understand these specific languages, your answer will demonstrate your understanding of basic programming. “It would require some creative thinking, brevity and conciseness that only the more experienced would actually have,” DeSantis says.

How would you implement the Facebook wall using only HTML5 elements and CSS -- without classes or IDs?

DeSantis  calls this a fun, silly question because no one would actually create a Web page this way. “But it would show me the candidate’s understanding of all the HTML 5 tags and elements and how they’d use those,” he says. “At a certain point, they’d have to get a little creative and do things a little outside the spec of how you’re supposed to use those elements. It would show me how they’d apply these elements combined with how they’d style those with CSS selectors to recreate the entire Facebook page, using just tags, HTML and CSS selectors.” Image: Cascading Style Sheets by Dan Horan [Dribbble]