CSS Interview Questions (Quiz) for Front End Interviews
Front End Interview Handbook is part of GreatFrontEnd! We are working to migrate the content over and you may find the latest version of this page on GreatFrontEnd.
Answers to Front-end Job Interview Questions - CSS Questions. Pull requests for suggestions and corrections are welcome!
- What is CSS selector specificity and how does it work?
- What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
- Describe
float
s and how they work. - Describe
z-index
and how stacking context is formed. - Describe Block Formatting Context (BFC) and how it works.
- What are the various clearing techniques and which is appropriate for what context?
- Explain CSS sprites, and how you would implement them on a page or site.
- How would you approach fixing browser-specific styling issues?
- How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?
- What are the different ways to visually hide content (and make it available only for screen readers)?
- Have you ever used a grid system, and if so, what do you prefer?
- Have you used or implemented media queries or mobile-specific layouts/CSS?
- Are you familiar with styling SVG?
- Can you give an example of an @media property other than screen?
- What are some of the "gotchas" for writing efficient CSS?
- What are the advantages/disadvantages of using CSS preprocessors?
- Describe what you like and dislike about the CSS preprocessors you have used.
- How would you implement a web design comp that uses non-standard fonts?
- Explain how a browser determines what elements match a CSS selector.
- Describe pseudo-elements and discuss what they are used for.
- Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
- What does
* { box-sizing: border-box; }
do? What are its advantages? - What is the CSS
display
property and can you give a few examples of its use? - What's the difference between
inline
andinline-block
? - What's the difference between a
relative
,fixed
,absolute
andstatic
ally positioned element? - What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
- Have you played around with the new CSS Flexbox or Grid specs?
- Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?
- How is responsive design different from adaptive design?
- Have you ever worked with retina graphics? If so, when and what techniques did you use?
- Is there any reason you'd want to use
translate()
instead ofabsolute
positioning, or vice-versa? And why? - Other Answers
What is CSS selector specificity and how does it work?
The browser determines what styles to show on an element depending on the specificity of CSS rules. We assume that the browser has already determined the rules that match a particular element. Among the matching rules, the specificity, four comma-separate values, a, b, c, d
are calculated for each rule based on the following:
a
is whether inline styles are being used. If the property declaration is an inline style on the element,a
is 1, else 0.b
is the number of ID selectors.c
is the number of classes, attributes and pseudo-classes selectors.d
is the number of tags and pseudo-elements selectors.
The resulting specificity is not a score, but a matrix of values that can be compared column by column. When comparing selectors to determine which has the highest specificity, look from left to right, and compare the highest value in each column. So a value in column b
will override values in columns c
and d
, no matter what they might be. As such, specificity of 0,1,0,0
would be greater than one of 0,0,10,10
.
In the cases of equal specificity: the latest rule is the one that counts. If you have written the same rule into your stylesheet (regardless of internal or external) twice, then the lower rule in your style sheet is closer to the element to be styled, it is deemed to be more specific and therefore will be applied.
I would write CSS rules with low specificity so that they can be easily overridden if necessary. When writing CSS UI component library code, it is important that they have low specificities so that users of the library can override them without using too complicated CSS rules just for the sake of increasing specificity or resorting to !important
.
References
- https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
- https://www.sitepoint.com/web-foundations/specificity/
What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
- Resetting - Resetting is meant to strip all default browser styling on elements. For e.g.
margin
s,padding
s,font-size
s of all elements are reset to be the same. You will have to redeclare styling for common typographic elements. - Normalizing - Normalizing preserves useful default styles rather than "unstyling" everything. It also corrects bugs for common browser dependencies.
I would choose resetting when I have a very customized or unconventional site design such that I need to do a lot of my own styling and do not need any default styling to be preserved.
References
Describe float
s and how they work.
Float is a CSS positioning property. Floated elements remain a part of the flow of the page, and will affect the positioning of other elements (e.g. text will flow around floated elements), unlike position: absolute
elements, which are removed from the flow of the page.
The CSS clear
property can be used to be positioned below left
/right
/both
floated elements.
If a parent element contains nothing but floated elements, its height will be collapsed to nothing. It can be fixed by clearing the float after the floated elements in the container but before the close of the container.
The .clearfix
hack uses a clever CSS pseudo selector (::after
) to clear floats. Rather than setting the overflow on the parent, you apply an additional class clearfix
to it. Then apply this CSS:
.clearfix::after {
content: ' ';
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Alternatively, give overflow: auto
or overflow: hidden
property to the parent element which will establish a new block formatting context inside the children and it will expand to contain its children.
References
Describe z-index
and how stacking context is formed.
The z-index
property in CSS controls the vertical stacking order of elements that overlap. z-index
only affects elements that have a position
value which is not static
.
Without any z-index
value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning (and their children) will always appear on top of elements with default static positioning, regardless of HTML hierarchy.
A stacking context is an element that contains a set of layers. Within a local stacking context, the z-index
values of its children are set relative to that element rather than to the document root. Layers outside of that context — i.e. sibling elements of a local stacking context — can't sit between layers within it. If an element B sits on top of element A, a child element of element A, element C, can never be higher than element B even if element C has a higher z-index
than element B.
Each stacking context is self-contained - after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context. A handful of CSS properties trigger a new stacking context, such as opacity
less than 1, filter
that is not none
, and transform
that is notnone
.
Note: What exactly qualifies an element to create a stacking context is listed in this long set of rules.
References
- https://css-tricks.com/almanac/properties/z/z-index/
- https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
Describe Block Formatting Context (BFC) and how it works.
A Block Formatting Context (BFC) is part of the visual CSS rendering of a web page in which block boxes are laid out. Floats, absolutely positioned elements, inline-blocks
, table-cells
, table-caption
s, and elements with overflow
other than visible
(except when that value has been propagated to the viewport) establish new block formatting contexts.
Knowing how to establish a block formatting context is important, because without doing so, the containing box will not contain floated children. This is similar to collapsing margins, but more insidious as you will find entire boxes collapsing in odd ways.
A BFC is an HTML box that satisfies at least one of the following conditions:
- The value of
float
is notnone
. - The value of
position
is neitherstatic
norrelative
. - The value of
display
istable-cell
,table-caption
,inline-block
,flex
, orinline-flex
,grid
, orinline-grid
. - The value of
overflow
is notvisible
.
In a BFC, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).
Vertical margins between adjacent block-level boxes in a BFC collapse. Read more on collapsing margins.
References
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
- https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
What are the various clearing techniques and which is appropriate for what context?
- Empty
div
method -<div style="clear:both;"></div>
. - Clearfix method - Refer to the
.clearfix
class above. overflow: auto
oroverflow: hidden
method - Parent will establish a new block formatting context and expand to contains its floated children.
In large projects, I would write a utility .clearfix
class and use them in places where I need it. overflow: hidden
might clip children if the children is taller than the parent and is not very ideal.
Explain CSS sprites, and how you would implement them on a page or site.
CSS sprites combine multiple images into one single larger image. It is a commonly-used technique for icons (Gmail uses it). How to implement it:
- Use a sprite generator that packs multiple images into one and generate the appropriate CSS for it.
- Each image would have a corresponding CSS class with
background-image
,background-position
andbackground-size
properties defined. - To use that image, add the corresponding class to your element.
Advantages:
- Reduce the number of HTTP requests for multiple images (only one single request is required per spritesheet). But with HTTP2, loading multiple images is no longer much of an issue.
- Advance downloading of assets that won't be downloaded until needed, such as images that only appear upon
:hover
pseudo-states. Blinking wouldn't be seen.
References
How would you approach fixing browser-specific styling issues?
- After identifying the issue and the offending browser, use a separate style sheet that only loads when that specific browser is being used. This technique requires server-side rendering though.
- Use libraries like Bootstrap that already handles these styling issues for you.
- Use
autoprefixer
to automatically add vendor prefixes to your code. - Use Reset CSS or Normalize.css.
- If you're using Postcss (or a similar transpiling library), there may be plugins which allow you to opt in for using modern CSS syntax (and even W3C proposals) that will transform those sections of your code into corresponding safe code that will work in the targets you've used.
How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?
- Graceful degradation - The practice of building an application for modern browsers while ensuring it remains functional in older browsers.
- Progressive enhancement - The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.
- Use caniuse.com to check for feature support.
- Autoprefixer for automatic vendor prefix insertion.
- Feature detection using Modernizr.
- Use CSS Feature queries @support
What are the different ways to visually hide content (and make it available only for screen readers)?
These techniques are related to accessibility (a11y).
width: 0; height: 0
. Make the element not take up any space on the screen at all, resulting in not showing it.position: absolute; left: -99999px
. Position it outside of the screen.text-indent: -9999px
. This only works on text within theblock
elements. This is a widely used and famous trick, but it comes with some downsides like causing performance issues, so you might want to consider usingtext-indent: 100%
instead.- Meta tags. For example by using Schema.org, RDF, and JSON-LD.
- WAI-ARIA. A W3C technical specification that specifies how to increase the accessibility of web pages.
Even if WAI-ARIA is the ideal solution, I would go with the absolute
positioning approach, as it has the least caveats, works for most elements and it's an easy technique.
References
- https://www.w3.org/TR/wai-aria-1.1/
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
- http://a11yproject.com/
- https://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
Have you ever used a grid system, and if so, what do you prefer?
Before Flex became popular (around 2014), the float
-based grid system was the most reliable because it still has the most browser support among the alternative existing systems (flex, grid). Bootstrap was using the float
approach until Bootstrap 4 which switched to the flex
-based approach. As of writing (2020), flex
is the recommended approach for building grid systems and has decent browser support.
For the adventurous, they can look into CSS Grid Layout, which uses the shiny new grid
property; it is even better than flex
for building grid layouts and will be the de facto way to do so in the future.
Have you used or implemented media queries or mobile-specific layouts/CSS?
Yes. An example would be transforming a stacked pill navigation into a fixed-bottom tab navigation beyond a certain breakpoint.
Are you familiar with styling SVG?
Yes, there are several ways to color shapes (including specifying attributes on the object) using inline CSS, an embedded CSS section, or an external CSS file. Most SVG you'll find around the web use inline CSS, but there are advantages and disadvantages associated with each type.
Basic coloring can be done by setting two attributes on the node: fill
and stroke
. fill
sets the color inside the object and stroke
sets the color of the line drawn around the object. You can use the same CSS color naming schemes that you use in HTML, whether that's color names (that is red
), RGB values (that is rgb(255,0,0)
), Hex values, RGBA values, etc.
<rect
x="10"
y="10"
width="100"
height="100"
stroke="blue"
fill="purple"
fill-opacity="0.5"
stroke-opacity="0.8" />
The above fill="purple"
is an example of a presentational attribute. Interestingly, and unlike inline styles like style="fill: purple"
which also happens to be an attribute, presentational attributes can be overriden by CSS styles defined in a stylesheet. So, if you did something like svg { fill: blue; }
it would override the purple fill we've defined.
References
Can you give an example of an @media property other than screen?
Yes, there are four types of @media properties (including screen):
all
- for all media type devicesprint
- for printersspeech
- for screenreaders that "reads" the page out loudscreen
- for computer screens, tablets, smart-phones etc.
Here is an example of print
media type's usage:
@media print {
body {
color: black;
}
}
References
What are some of the "gotchas" for writing efficient CSS?
Firstly, understand that browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector. Hence avoid key selectors that are tag and universal selectors. They match a large number of elements and browsers will have to do more work in determining if the parents do match.
BEM (Block Element Modifier) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override.
Be aware of which CSS properties trigger reflow, repaint, and compositing. Avoid writing styles that change the layout (trigger reflow) where possible.
References
What are the advantages/disadvantages of using CSS preprocessors?
Advantages:
- CSS is made more maintainable.
- Easy to write nested selectors.
- Variables for consistent theming. Can share theme files across different projects.
- Mixins to generate repeated CSS.
- Sass features like loops, lists, and maps can make configuration easier and less verbose.
- Splitting your code into multiple files. CSS files can be split up too but doing so will require an HTTP request to download each CSS file.
Disadvantages:
- Requires tools for preprocessing. Re-compilation time can be slow.
- Not writing currently and potentially usable CSS. For example, by using something like postcss-loader with webpack, you can write potentially future-compatible CSS, allowing you to use things like CSS variables instead of Sass variables. Thus, you're learning new skills that could pay off if/when they become standardized.
Describe what you like and dislike about the CSS preprocessors you have used.
Likes:
- Mostly the advantages mentioned above.
- Less is written in JavaScript, which plays well with Node.
Dislikes:
- I use Sass via
node-sass
, which is a binding for LibSass written in C++. I have to frequently recompile it when switching between node versions. - In Less, variable names are prefixed with
@
, which can be confused with native CSS keywords like@media
,@import
and@font-face
rule.