HTML / CSS Interview Questions

Explain the basic components of a typical webpage, e.g. XHTML, CSS, JavaScript, etc. From a high level perspective, what is each used for?

What do we use classes and ids for? What's the difference between them? Can you have more than one element with the same class in the DOM? How about more than one ID?

Can you assign more than one class to a single element (e.g. 'class=“foo baz”)? How about more than one id?

What are commonly used doctypes? What is the difference between HTML and XHTML? Between XHTML 1.0 Transitional and XHTML 1.0 Strict?

What are pros and cons of using tables for layout? When should you use them, and when should you not?

What does the <label> tag do? Why use it?

Tell me about some common meta tags and what they do (e.g. 'robots', 'keyword', 'description', etc.)

What are some of the different types of stylesheets that you can attach (e.g. media='print' for printable pages, media='handheld' for mobile sites). Easier question: how do you make a page print with a different look than the one on the screen?

Why do you want to encode non-ASCII characters like & (&) or » (») ? Advanced question: are there cases when you technically don't have to encode those characters?

How do you do HTML5 videos? Have you played with the new stuff in HTML5 very much?

At the most basic level, why even use CSS? What does it do for us, as compared to the 'old' way of coding? I'm looking for a theoretical understanding of the separation between a document's markup/content and its styling.

What's the difference between an inline element and a block element?

What are some ways you might target IE (or IE6) only, without affecting other browsers?

How do CSS precedence/cascading rules work? How does the !important directive affect the rules?

Have you ever used a CSS reset? (e.g. the * reset, or the YUI Reset)? Why are they useful?

Have you ever played with any of the advanced selectors (e.g. selecting children or selecting siblings)? Or with any of the psuedo-selectors (:hover, etc.)? Note that these are only supported in modern browsers, and so it is not common for people to be familiar with them, but if they are it's a good sign.

What are some different ways for specifying a color (e.g. #ffffff, white, #fff & rgb(255,255,255))?

What about different lengths? Pixels, ems, & pts are all common.

It's frequently worth asking some basic text questions; e.g. how to increase/decrease text size, make a font bold (without using the <b> tag!), adjust line-height, etc.

Explain how the CSS box model works. Draw a box and then explain what the border is, what the margin is, what the padding is, etc.? If you assign a width: or height: to something, what specifically does that refer to?

Explain vertical margin collapsing.

How do you float an element, and what does that mean? What's clearing?

What's the difference between position: relative, position: fixed & position: absolute?

What does z-index do? Advanced question: what are some of the issues with IE6 and z-index?

What does it mean for your CSS to 'gracefully degrade' across browsers? What are some techniques for achieving graceful degradation? Have you had any experience with newer CSS versions, such as CSS3?

Write the markup for this text document (you're looking to see that they use <h1>, <h2>, etc. tags for headers, <p> tags for paragraphs, properly handle the lists, etc.)

Create this layout using HTML/CSS.