css interview questions

1. What is CSS?

CSS stands for Cascading Style Sheets. It is a styling language used to design and control the appearance of HTML web pages.
HTML is used to create the structure of a webpage, while CSS is used to make the webpage beautiful and user-friendly.

CSS can be used to change:

Text color
Font size and style
Background color
Width and height
Margin and padding
Borders
Page layout
Responsive design

Example

p {
color: blue;
font-size: 20px;
}
Here, the paragraph text becomes blue and its font size becomes 20px.

2. What are the types of CSS?

There are three types of CSS:

1. Inline CSS

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

Hello

It is useful when we want to apply a style to a single element.

2. Internal CSS

CSS is written inside the tag in the HTML document.<br> HTML</p> <style> p { color: blue; }

It is useful when styling a single webpage.

3. External CSS

CSS is written in a separate .css file and connected to the HTML file.
HTML

This is commonly preferred for larger websites because the same CSS file can be used for multiple webpages.

3. What is a CSS Selector?

A CSS selector is used to select HTML elements that we want to style.

For example:

p {
color: red;
}
Here, p is the selector, and the style is applied to all

elements.
Common selectors include:
Element selector: p
Class selector: .title
ID selector: #header
Universal selector: *
Attribute selector: [type="text"]

Example

.title {
color: green;
}
This applies the style to elements having the class title.

4. What is the difference between Class and ID in CSS?

Both class and ID are used to identify HTML elements, but they are used differently.

Class:

Written using . in CSS.
Can be used on multiple elements.
Useful when applying the same style to several elements.
.student {
color: blue;
}

ID:

Written using # in CSS.
Normally used for one unique element.
Useful when identifying a specific element.
#header {
color: red;
}

Simple difference:

Class → Multiple elements
ID → One unique element

5. What is the CSS Box Model?

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

It consists of four parts:

Content – The actual text or image.
Padding – Space between the content and border.
Border – The line around the padding and content.
Margin – Space outside the border.

The order is:

Content → Padding → Border → Margin
Example:
.box {
width: 200px;
padding: 20px;
border: 2px solid black;
margin: 10px;
}
The Box Model is very important for controlling the size and spacing of elements.

6. What is Padding in CSS?

Padding is the space between the content and the border of an element.

For example:

.box {
padding: 20px;
}
This creates 20px of space between the content and the border.
We can also specify padding for individual sides:
.box {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}

Simple example:

If a box contains the word "Hello", padding creates space around "Hello" inside the box.

7. What is Margin in CSS?

Margin is the space outside the border of an element.
It is used to create space between elements.

Example:

.box {
margin: 20px;
}
This creates 20px of space around the outside of the element.
We can also use:
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
Padding vs Margin
Padding: Space inside the border.
Margin: Space outside the border.

8. What is display: flex in CSS?

Flexbox is a CSS layout system used to arrange elements in a row or column.

To use Flexbox:

.container {
display: flex;
}
By default, the child elements are arranged in a row.
Some important Flexbox properties are:
display: flex
flex-direction
justify-content
align-items
gap
flex-wrap
Example:
.container {
display: flex;
justify-content: center;
align-items: center;
}
Flexbox is commonly used to create navigation bars, cards, buttons, and page layouts.

9. What is CSS Grid?

CSS Grid is a layout system used to arrange elements in rows and columns.

Example:

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
This creates three columns of equal size.
Grid is useful for creating:
Website layouts
Image galleries
Product cards
Dashboard layouts
Rows and columns

Flexbox vs Grid

Flexbox:

Mainly works in one direction — row or column.

Grid:

Works in two directions — rows and columns.

10. What is the difference between Flexbox and Grid?

Both Flexbox and Grid are CSS layout systems, but they are designed for different purposes.

Flexbox

Flexbox is mainly a one-dimensional layout system.
It is useful when arranging elements in:
A row
A column

Example:

.container {
display: flex;
justify-content: space-between;
}

Grid

Grid is a two-dimensional layout system.
It is useful when working with:
Rows
Columns
Complete page layouts

Example:

.container {
display: grid;
grid-template-columns: 1fr 1fr;
}