CSS interview questions

CSS quiz questions

  • 1.

    Explain what a class selector is and how it’s used

    Answer:

    • A class can be thought of as a grouped collection of CSS attributes applied to HTML elements. This allows you to apply the same styling to multiple HTML elements by placing them in the same CSS class.
    • Class methods can be called by inserting a ‘class’ property and name within an HTML element, then calling the class name with a ‘.’  in the CSS doc.
    View
  • 2.

    What is responsive design?

    Answer:

    Responsive design is about making websites work wherever the web is. Different devices with different sizes and different capabilities. Responsive design is about taking one code base and making it work for all of them. Part of that is media queries and different visuals. Part of that is different resources (e.g. different JavaScript to handle touch vs click or different images to accommodate the screen).

    View
  • 3.

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

    Answer:

    Bonus points for bringing up specific details like the fact that you can't transform inline elements.

    View
  • 4.

    What are sprites and why would use them? 

    Answer:

    Sprites are essentially multiple images combined into one. Performance is the reason that they are used. Generally speaking, the slowest thing a website can do is request a resource. The fewer requests a site needs to make, the faster it is. Fast = good. Combining what would be many requests into one = good.

    View
  • 5.

    List some techniques to clear floats?

    Answer:

    You can do it in three ways:

    • Use a clearfix (bonus points for micro clearfix).
    • Float the parent as well.
    • Use an overflow property other than "visible" on the parent (bonus points for listing downsides like cutting off shadows).
    View
  • 6.

    Describe what a “reset” CSS file does and how it’s useful. Are you familiar with normalize.css? Do you understand how they differ?

    Answer:

    CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline. We should use reset css because every browser has its own default 'user agent' stylesheet, that it uses to make unstyled websites appear more legible.

    Normalize you might call a CSS reset alternative. Instead of wiping out all styles, it delivers a set of reasonable defaults. It doesn't unset things that are already consistent across browsers and reasonable (e.g. bold headers). In that way it does some less than a reset. It also does some more than a reset in that it handles quirks you may never consider, like HTML5 audio element inconsistencies or line-height inconsistencies when you use sub and sup elements.

    View
  • 7.

    What are Sass, LESS, and Stylus? Why to use them? Is there any relationship between Compass and Sass?

    Answer:

    They are CSS preprocessors. They are an abstraction layer on top of CSS. They are a special syntax/language that compile down into CSS. They make managing CSS easier, with things like variables and mixins to handle vendor prefixes (among other things). They make doing best practices easier, like concatenating and compressing CSS.

    Bonus points for knowing how they differ and/or having experience using them. More bonus points for knowing what things like Compass, Bourbon, LESSHat, Nib, etc are and how they relate.

    View
  • 8.

    What is the "Box Model" in CSS? Which CSS properties are a part of it?

    Answer:

    The CSS box model is fundamental to understanding layout and sizing and such. It's made up of:

    • Width and height (or in the absence of that, default values and the content inside)
    • Padding
    • Border

    Margin is related but not technically a part of it. I would give extra points for knowing/mentioning that, but not take away and points for including it.

    View

© 2017 QuizBucket.org