CSS Interview Questions

15 Common CSS Questions

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.

CSS Interview Questions and AnswersRead: 2021 Front-End Interview Prep Guide

Read: 25 Common Face-to-Face Interview Questions and Answers!

  • 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.
  • t’s frequently worth asking some basic text questions; e.g. how to increase/decrease text size, make a font bold (without using the 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?

We are adding CSS Interview Question and Answers Guide to have it all in one place as cheat sheet.

Also here you can find latest standards for CSS.

Introduction: CSS3 Interview Questions and Answers

 

 

    • “What is the difference between CSS and CSS3 ?”

      CSS is used to control the style and layout of Web pages.

      CSS3 is the latest standard for CSS.

      CSS3 is split up into “modules”. The old specification has been split into smaller pieces, and new ones are also added.

      Some of the most important CSS3 modules are:

      Selectors
      Box Model
      Backgrounds and Borders
      Text Effects
      2D/3D Transformations
      Animations
      Multiple Column Layout
      User Interface

 

    • “How is multiple background images handled in CSS3?”

      CSS3 allows you to use several background images for an element.

      Set two background images for the body element:

      background-image:url(img_flwr.gif),url(img_tree.gif);

 

    • ” What new futures added in CSS3 for Borders?”

      Adding rounded corners in CSS2 was tricky. We had to use different images for each corner.

      In CSS3, creating rounded corners is easy.

      In CSS3, the border-radius property is used to create rounded corners:

      Add rounded corners to a div element:

      div
      {
      border:2px solid;
      border-radius:25px;
      -moz-border-radius:25px; /* Firefox 3.6 and earlier */
      }