Top 50 CSS Interview Questions And Answers

Question 1

What is _CSS_?

Accepted Answer

**CSS** stands for **Cascading Style Sheets**. CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

CSS was intended to allow web professionals to separate the content and structure of a website's code from the visual design.

Question 2

Explain the _three main ways_ to apply CSS styles to a web page

Accepted Answer

Using the inline style attribute on an element ```html

``` Using a ` ``` Loading an external CSS file using the `` tag ```html CSS Refresher ```

Question 3

How to use _variables_ in Sass?

Accepted Answer

Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the `$` symbol to make something a variable.

```css
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
```

Question 4

Explain what is a `@extend` directive used for in Sass?

Accepted Answer

Using `@extend` lets you share a set of CSS properties from one selector to another. It helps keep your Sass very dry.

Consider:
```css
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}
```
CSS output:
```css
.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}
```

Question 5

Have you played around with the new CSS `Flexbox` or `Grid` specs?

Accepted Answer

Yes. Flexbox is mainly meant for 1-dimensional layouts while Grid is meant for 2-dimensional layouts.

Flexbox solves many common problems in CSS, such as vertical centering of elements within a container, sticky footer, etc. Bootstrap and Bulma are based on Flexbox, and it is probably the recommended way to create layouts these days. Have tried Flexbox before but ran into some browser incompatibility issues (Safari) in using `flex-grow`, and I had to rewrite my code using `inline-blocks` and math to calculate the widths in percentages, it wasn't a nice experience.

Grid is by far the most intuitive approach for creating grid-based layouts (it better be!) but browser support is not wide at the moment.

Question 6

What is _variable interpolation_ in Sass? Provide some examples.

Accepted Answer

If you want to use variables inside a string, you will have to use a process called **variable interpolation**. To use it you will have to wrap your variables in `#{}`.

Consider:
```css
$name: 'Gajendar';
$author: 'Author : $name'; // 'Author : $name'

$author: 'Author : #{$name}';
// 'Author : Gajendar'
```

The interpolation method could be useful in situations where the value of a variable is determined by some conditional statements.

Question 7

What is _DOM_ (Document Object Model) and how is it linked to CSS?

Accepted Answer

The *Document Object Model (DOM)* is a cross-platform and language-independent *application programming interface* that treats an HTML, XHTML, or XML document as a tree structure wherein each node is an object representing a part of the document.

With the Document Object Model, programmers can create and build documents, navigate their structure, and add, modify, or delete elements and content. The DOM specifies interfaces which may be used to manage XML or HTML documents.

When a browser displays a document, it must combine the document's content with its style information. The browser converts HTML and CSS into the DOM (Document Object Model). The DOM represents the document in the computer's memory. It combines the document's content with its style.

Question 8

Explain CSS _sprites_, and how you would implement them on a page or site

Accepted Answer

*CSS sprites* combine multiple images into one single larger image. It is commonly used technique for icons (Gmail uses 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` and `background-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.

Question 9

What is a _CSS rule_?

Accepted Answer

Web browsers apply **CSS rules** to a document to affect how they are displayed. A CSS rule is formed from:

* A **set of properties**, which have values set to update how the HTML content is displayed,
* A **selector**, which selects the element(s) you want to apply the updated property values to.

A set of CSS rules contained within a stylesheet determines how a webpage should look.

Question 10

Explain the CSS `box model` and the layout components that it consists of

Accepted Answer

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)

Top 50 CSS Interview Questions

Explain the three main ways to apply CSS styles to a web page

What is CSS?

How to use variables in Sass?

Explain what is a @extend directive used for in Sass?

What is a CSS rule?

List out the key features for Sass

What Selector Nesting in Sass is used for?

Describe floats and how they work

What is the difference between classes and IDs in CSS?

Have you played around with the new CSS Flexbox or Grid specs?

What existing CSS frameworks have you used locally, or in production? How would you change/improve them?

List out the data types that Sass supports

Explain the CSS box model and the layout components that it consists of

What is Sass?

Explain CSS sprites, and how you would implement them on a page or site

What is DOM (Document Object Model) and how is it linked to CSS?

How would you approach fixing browser-specific styling issues?

What’s the difference between resetting and normalizing CSS? Which would you choose, and why?

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 is CSS preprocessor and why to user one?

Describe pseudo-elements and discuss what they are used for

What is CSS selectors? Name some.

What does Accessibility (a11y) mean?

How is responsive design different from adaptive design?

What are the advantages/disadvantages of using CSS preprocessors?

Have you ever worked with retina graphics? If so, when and what techniques did you use?

What's the difference between a relative, fixed, absolute and statically positioned element?

How does CSS actually work (under the hood of browser)?

What is a Grid System in CSS?

Explain the usage of table-layout property

What's the difference between SCSS and Sass?

Explain the purpose of clearing floats in CSS

Describe z-index and how a stacking context is formed

Is there any reason you'd want to use translate() instead of absolute positioning, or vice-versa? And why?

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?

How do you optimize your webpages for print?

Explain the basic rules of CSS Specificity

Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?

What does * { box-sizing: border-box; } do? What are its advantages?

What is variable interpolation in Sass? Provide some examples.

How to create a zebra striped table with CSS?

What is a Mixin and how to use on?

What is the @content directive used for?

What will be the CSS output for the following Sass code?

What the code fragment has the greater CSS specificity?

What clearfix methods do you know? Provide some examples.

What’s wrong with Sass nesting? Provide some example.

How to style every element which has an adjacent item right before it?

Write down a selector that will match any links end in .zip, .ZIP, .Zip etc...

Explain what is a `@extend` directive used for in Sass?

Describe `floats` and how they work

What is the difference between `classe`s and `ID`s in CSS?

Have you played around with the new CSS `Flexbox` or `Grid` specs?

Explain the CSS `box model` and the layout components that it consists of

Explain your understanding of the `box` model and how you would tell the browser in CSS to render your layout in different box models.

Describe `pseudo-elements` and discuss what they are used for

What's the difference between a `relative`, `fixed`, `absolute` and `static`ally positioned element?

Explain the usage of `table-layout` property

Describe `z-index` and how a stacking context is formed

Is there any reason you'd want to use `translate()` instead of `absolute` positioning, or vice-versa? And why?

What does `* { box-sizing: border-box; }` do? What are its advantages?

What is the `@content` directive used for?

What `clearfix` methods do you know? Provide some examples.

Write down a selector that will match any links end in `.zip`, `.ZIP`, `.Zip` etc...