Skip Navigation LinksHome > Categories > Code from a Category

5 Essential CSS Interview Questions


User Name: toptal
Name: toptal.com
Contact Me: https://www.toptal.com/contact
Home Page: www.toptal.com
Toptal is an exclusive network of the top freelance software developers and designers in the world. Top companies rely on Toptal freelancers for their most important projects. [More]
Viewed Times: 1736
Add Date: 02/02/2016
Comprehensive, community-driven list of essential CSS interview questions from Toptal
1. Explain the CSS “box model” and the layout components that it consists of.

Provide some usage examples.

The CSS box model is a rectangular layout paradigm for HTML elements that consists of the following:

- Content - The content of the box, where text and images appear
- Padding - A transparent area surrounding the content (i.e., the amount of space between the border and the content)
- Border - A border surrounding the padding (if any) and content
- Margin - A transparent area surrounding the border (i.e., the amount of space between the border and any neighboring elements)

Each of these properties can be specified independently for each side of the element (i.e., top, bottom, right, left) or fewer values can be specified to apply to multiple sides. For example:

/* top right bottom left */
padding: 25px 50px 75px 100px;

/* same padding on all 4 sides: */
padding: 25px;

/* top/bottom padding 25px; right/left padding 50px */
padding: 25px 50px;

/* top padding 25px; right/left padding 50px; bottom padding 75px */
padding: 25px 50px 75px;

2. Explain what elements will match each of the following CSS selectors:

- div, p
- div p
- div > p
- div + p
- div ~ p

- div, p - Selects all (div) elements and all (p) elements
- div p - Selects all (p) elements that are anywhere inside a (div) element
- div > p - Selects all (p) elements where the immediate parent is a (div) element
- div + p - Selects all (p) elements that are placed immediately after a (div) element
- div ~ p - Selects all (p) elements that are anywhere preceded by a (div) element

3. Explain the meaning of each of these CSS units for expressing length:

- cm
- em
- in
- mm
- pc
- pt
- px

- cm - centimeters
- em - elements (i.e., relative to the font-size of the element; e.g., 2 em means 2 times the current font size)
- in - inches
- mm - millimeters
- pc - picas (1 pc = 12 pt = 1/6th of an inch)
- pt - points (1 pt = 1/72nd of an inch)
- px - pixels (1 px = 1/96th of an inch)

4. In CSS3, how would you select:

Every (a) element whose href attribute value begins with “https”.
Every (a) element whose href attribute value ends with “.pdf”.
Every (a) element whose href attribute value contains the substring “css”.

Select every (a) element whose href attribute value begins with “https”:
a[href^="https"]

Select every (a) element whose href attribute value ends with “.pdf”:
a[href$=".pdf"]

Select every (a) element whose href attribute value contains the substring “css”:
a[href*="css"]

5. Given the following HTML:

(div id="page")
(h1)Heading Title(/h1)
(h2)Subheading Title(/h2)
(h2)Subheading Title(/h2)
(h1)Heading Title(/h1)
(h2)Subheading Title(/h2>)
(h1)Heading Title(/h1)
(/div)

How could you use CSS to achieve the following automatic numbering:

1) Heading Title
1.1) Subheading Title
1.2) Subheading Title

2) Heading Title
2.1) Subheading Title

3) Heading Title

The following CSS will achieve this type of automatic numbering:

#page {
counter-reset: heading;
}

h1:before {
content: counter(heading)") ";
counter-increment: heading;
}

h1 {
counter-reset: subheading;
}

h2:before {
content: counter(heading)"." counter(subheading)") ";
counter-increment: subheading;
}

This article was originally published on Toptal

Post a Comment
Name: (Optional)
Email: (Optional, you can get an email if somebody replys your comments)*
Email me if somebody respons my comment below:
Details**:
Enter Text
as Below: 		(case insensitive, if hard to read, click the "get a new one" button)
 
    
* Your email address will not be shared with any third parties for any reason.
** Maximum 1000 charactors.