CSS Interview Questions and Answers

css interview questions

List of most frequently asked CSS Interview Questions and Answers :

What is CSS ?

CSS stands for Cascading Style Sheet. It is a popular styling language that is used with HTML to design websites. 

How can we integrate CSS on a web page?

We can add CSS in 3 ways and are Inline, Internal, and External.

What is the most popular CSS Framework?


Why we use opacity in CSS?

Opacity specifies the transparency of an element. It is a measure with which the clarity of image can be determined.

What are CSS image sprites?

An image sprite is a collection of images put into a single image. If a web page has too many images then there will be multiple requests to fetch them. Using image sprites will reduce the number of server requests and save bandwidth.

What is specificity in CSS ?

CSS specificity is a score or rank that decides which style declaration has to be used to an element.

Explain about CSS gradients ?

CSS gradients lets you display smooth transitions between multiple specified colors. we have Linear and Radial gradients.

What are media queries ?

Media queries are the rules which are loaded based on device width, type and height of viewport. Using media queries we can write separate css based on devices.

Why we use important in CSS ?

If there are two pieces of code having same rules and if we keep important to one then the rule with important loads up overriding other rule.

How to load an image in background if we have path ?

background-image: url(“example.gif”);

What is difference between visibility hidden and display none ?

Display: none –> element will be hidden and accessible by DOM. No space between tags.

Visibility: hidden –> element will be hidden and space is present between tags.

What are CSS counters ?

CSS counters are variables maintained by CSS whose values can be incremented by CSS rules just to track how many times they are used.

What is the difference in usage of ID and Class ?

#exampleId –> for ID

.exampleClass –> for Class

Explain z-index ?

The z-index helps specify the stack order of positioned elements that are overlapped. The z-index default value is 0 and can be either a positive or negative number. Increasing z-index will increase z-axis position of that element.

How do we add pseudo elements to a selector ?



What is the difference between px and rem ?

px and rem both are different units in css. rem will be converted into equivalent px value by browser.

1rem = 16px.

Explain box-shadow ?

Box-shadow property attaches one or more shadows to an element.

What are different ways of positioning an element ?

position –> fixed, absolute, relative, sticky, static.

Can we minify CSS ?

Yes and it is recommended to do.

What is the difference between padding and margin ?

Margin is space around the element and padding is space inside border of the element.

Explain float and clear ?

Float property shows how the element should float.

Clear property specifies what elements can float beside the cleared element and on which side.

How can we keep comments in CSS ?

/* This is a single-line comment */

/* This is
a multi-line
comment */

Can we load an image as a list-item ?


list-style-image: url(‘sqpurple.gif’);

Explain about CSS Combinators ?

Combinators explain relationship between selectors.

space, >, +, ~ are combinators.

Can we select an element based on attribute ?

Yes. The [attribute=”value”] selector is used to select elements with a specified attribute and value.

How to write universal selector ?


diplay: block;


Embedded stylesheet vs External stylesheet what is the difference ?

Both are in head section.  Embedded styles allow you to override the rules of an external style sheet.

What are the properties of flexbox ?flex-direction

flex-wrap, flex-flow, justify-content, align-items, align-content

How do we write browser specific css ?

For chrome and safari, we can write with webkit rules.

For firefox, we can write with moz rules.

For IE, we can write ms inline rules.

If an element have css written as both id and class selector which will have higher priority ?

ID selector is more specific compared to class so it will have higher priority.

Watch out this space for more css interview questions and answers.

Thanks for visiting InterviewQuestionsBlog !!!!

Related Articles:

HTML Interview Questions

CSS Tutorial

Leave a Reply

%d bloggers like this: