DEV Community

Cover image for CSS Interview Questions
Rakshambika
Rakshambika

Posted on

CSS Interview Questions

#webdev #css #learning #interview

CSS Interview Questions and Answers

1. What is CSS? What are the different ways to apply CSS?

  • CSS stands for Cascading Style Sheets.
  • It is a stylesheet language used to style and design HTML elements on a webpage.
  • CSS is used to control Colors, Fonts, Spacing, Sizes, Layouts, Borders, Animations, and Responsive Design. 
h1 {
    color: blue;
    font-size: 30px;
}
Enter fullscreen mode Exit fullscreen mode

Here, CSS changes the color and font size of the <h1> element.

Different ways to apply CSS

There are three ways to apply CSS to an HTML document:

1. Inline CSS

CSS is written directly inside the HTML element using the style attribute.

<h1 style="color: blue;">Hello World</h1>
Enter fullscreen mode Exit fullscreen mode

Use: For applying styles to a single element.

2. Internal CSS

CSS is written inside the <style> tag within the <head> section of the HTML document.

<head>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>
Enter fullscreen mode Exit fullscreen mode

Use: When styles are required for a single HTML page.

3. External CSS

CSS is written in a separate .css file and connected to the HTML file using the <link> tag.

style.css

h1 {
    color: blue;
}
Enter fullscreen mode Exit fullscreen mode

index.html

<head>
    <link rel="stylesheet" href="style.css">
</head>
Enter fullscreen mode Exit fullscreen mode

2. What is CSS Priority?

CSS Priority: Inline vs Internal vs External

  • When the same element is styled by Inline, Internal, and External CSS, the browser generally gives higher priority to Inline CSS.
  • Inline CSS generally has higher priority than Internal and External CSS.
  • For Internal vs External CSS, the one that comes later generally wins if both have the same specificity.

Example

External CSS

p {
    color: blue;
}
Enter fullscreen mode Exit fullscreen mode

Internal CSS

<style>
    p {
        color: green;
    }
</style>
Enter fullscreen mode Exit fullscreen mode

Inline CSS

<p style="color: red;">Hello</p>
Enter fullscreen mode Exit fullscreen mode

The text will be red because the inline style has higher priority.

3. What is the CSS Box Model?

The CSS Box Model is a concept that describes how every HTML element is represented as a rectangular box on a webpage.

The Box Model consists of four parts:

  • Content – The actual content of the element, such as text or an image.
  • Padding – The space between the content and the border.
  • Border – The line surrounding the padding and content.
  • Margin – The space outside the border, used to create distance between elements.

The order is:

Content → Padding → Border → Margin

Example 

.box {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}
Enter fullscreen mode Exit fullscreen mode

4. What is the difference between display: block and display: inline?

display: block

A block-level element:

  • Starts on a new line.
  • Takes up the full available width by default.
  • Allows width and height to be applied.
  • Allows margin and padding on all sides.
  • Common block elements: <div>, <p>, <h1>, <section>.

Example 

div {
    display: block;
    width: 200px;
    height: 100px;
}
Enter fullscreen mode Exit fullscreen mode

display: inline

An inline element:

  • Does not start on a new line.
  • Takes only the width required by its content.
  • Width and height generally do not apply.
  • Horizontal margin and padding work, but vertical spacing behaves differently.
  • Common inline elements: <span>, <a>, <strong>, <em>.

Example 

span {
    display: inline;
}
Enter fullscreen mode Exit fullscreen mode

5. What is Flexbox? What are its main properties?

  • Flexbox, or Flexible Box Layout, is a CSS layout system used to arrange and align elements inside a container.
  • It makes it easier to create responsive layouts and control the direction, alignment, spacing, and size of elements.

To use Flexbox, we set:

.container {
    display: flex;
}
Enter fullscreen mode Exit fullscreen mode

The element with display: flex becomes the flex container, and its direct children become flex items.

Main Flexbox Properties

1. display: flex

Makes an element a flex container.

.container {
    display: flex;
}
Enter fullscreen mode Exit fullscreen mode

2. flex-direction

Defines the direction of the flex items.

.container {
    flex-direction: row;
}
Enter fullscreen mode Exit fullscreen mode

Common values:

  • row – left to right
  • row-reverse – right to left
  • column – top to bottom
  • column-reverse – bottom to top

3. justify-content

Controls the alignment of items along the main axis.

.container {
    justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

Common values:

  • flex-start
  • center
  • flex-end
  • space-between
  • space-around
  • space-evenly

6. What is Grid? What are its main properties?

  • CSS Grid is a two-dimensional layout system used to arrange elements into rows and columns.
  • It is useful when you need to create complex layouts where you want to control both horizontal and vertical positioning.

To use CSS Grid:

.container {
    display: grid;
}
Enter fullscreen mode Exit fullscreen mode

Main Grid Properties

  • display: grid – Makes an element a grid container.
  • grid-template-columns – Defines the columns.
  • grid-template-rows – Defines the rows.
  • gap – Creates space between rows and columns.
  • grid-column – Controls how many columns an item occupies.
  • grid-row – Controls how many rows an item occupies.

7. How is Grid different from Flexbox?

The main difference is that Flexbox is one-dimensional, while CSS Grid is two-dimensional.

  • Flexbox is used to arrange elements in one direction at a time — either a row or a column.
  • Grid is used to arrange elements in both rows and columns at the same time.
  • Flexbox is useful for component-level layouts, such as navigation bars, buttons, and cards.
  • Grid is useful for larger page layouts, such as headers, sidebars, content areas, and footers.

Simple Example

Flexbox

.container {
    display: flex;
    justify-content: space-between;
}
Enter fullscreen mode Exit fullscreen mode

It arranges items mainly along one axis.

Grid

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
Enter fullscreen mode Exit fullscreen mode

It creates a layout with multiple columns and rows.

8. What is the position Property in CSS?

  • The CSS position property is used to control how an element is positioned on a webpage.
  • It allows us to position elements relative to their normal position, a parent element, the viewport, or the scrolling position.

Types of Position

There are 5 main values:

  1. static
  2. relative
  3. absolute
  4. fixed
  5. sticky
  • Static → Default position.
  • Relative → Moves relative to its original position.
  • Absolute → Positioned relative to the nearest positioned ancestor.
  • Fixed → Positioned relative to the viewport and stays while scrolling.
  • Sticky → Acts like relative until a scroll threshold, then sticks.

9. What are Media Queries in CSS?

Media queries are a CSS feature used to apply different styles based on the screen size, device type, orientation, or other characteristics.

They are mainly used to make websites responsive, so the website looks good on mobile, tablet, and desktop devices.

Syntax 

@media (max-width: 768px) {
    .container {
        width: 100%;
    }
}
Enter fullscreen mode Exit fullscreen mode

Here, the CSS inside @media will be applied when the screen width is 768px or less.

Example 

.container {
    display: flex;
    gap: 20px;
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}
Enter fullscreen mode Exit fullscreen mode

On a desktop, the items are displayed in a row.

On a mobile/tablet, the items are displayed in a column.

10. Why do we need a Responsive Web Page?

A responsive web page automatically adjusts its layout and content according to the screen size and device being used.

We need responsive web pages because users access websites from different devices such as mobile phones, tablets, laptops, and desktops.

Reasons

  • Works on different devices
    The website can adapt to mobile, tablet, and desktop screens.

  • Better user experience
    Users can easily read content, click buttons, and navigate the website without zooming or scrolling unnecessarily.

  • Improves accessibility
    Content becomes easier to view and interact with across different screen sizes.

  • Reduces development effort
    Instead of creating completely separate websites for mobile and desktop, one responsive website can adapt to different devices.

  • Improves SEO
    Search engines generally prefer websites that provide a good experience across devices.

  • Future-friendly
    A responsive layout can adapt more easily to new screen sizes and devices.

Top comments (0)