Advanced CSS interview questions

The front-end developers interview always covers CSS questions. The CSS-related questions go from basic to advanced level. The basic knowledge of CSS is vital for a front-end developer position.

If we want to claim as full-stack web developer then you will have to have some CSS basic knowledge. Many software developers think CSS is so easy and feel a bit reluctant doing it.

Having some CSS knowledge is useful case of web development. How DOM elements are styled with CSS is good to know as a developer. Following are some really useful advanced CSS interview questions:

Advanced CSS interview questions

What is the relation between line-height and font-size of an element?

Answer: The font-size and line-height has a close relation. When we use numbers such as 1, 1.5, 2, 3 etc as line-height then it is difficult to find the meaning.

To calculate the line-height space on top and bottom of an element, subtract the font size and then distribute the remaining pixels equally on top and bottom.

When font-size: 16px and line-height: 1 then?

.element{font-size:16px; line-height:1}

When an element has a font-size 16px and line-height 1 which means font-size and line-height is equal (line-height=font-size * 1). So no space on the top and bottom of that element.

When font-size:16px and line-height:1.5 then?

.element{font-size:16px; line-height:1.5}

In this case the line-height will be 24px becuase line-height=font-size * 1.5. So the element will have 4px on space on the top and 4px space on the bottom.

When font-size:16px and line-height:20px then?

.element{font-size:16px; line-height:20px}

In this case the line-height is 20px. So the element will have 2px on space on the top and 2px space on the bottom.

What are the differences between display:block, display:inline-block and display:inline in CSS?

display:inlinedisplay:inline-blockdisplay:block
Respect left & right margins and paddings, but not top & bottomRespect all margins and paddingsRespect all margins and paddings
Ignore the width and heightRespect width and heightRespect width & height, takes full width if not defined
Allow other elements to sit to the element’s left and rightAllow other elements to sit to the element’s left and rightForce a line break after the block element

What are the differences between content-box and border-box of CSS box model?

Answer:The box-sizing property of an element can have two values. The content-box and the border-box. The content-box is the default value for box-sizing property.

The differences between content-box and border-box:

In case of content-box the width and height properties do NOT include border, padding but for border-box the border, padding is included with the content.

Example of content-box and border-box:

border box vs content box

Which one is better between translate() and absolute positioning?

Answer:Moving element with translate() is better than absolute positioning (top,left,right,bottom).

Transform causes the browser to create a GPU layer for the element but changing absolute positioning properties uses the CPU. Hence translate() is more efficient and smoother than absolute positioning.

What are different types of media properties?

Media TypeDescription
all

Suitable/intended for all devises (default).

aural

Intended for speech synthesizers.

braille

Intended for braille tactile feedback devices.

embossed

Intended for paged braille printers.

handheld

Intended for handheld devices (typically small
screen, monochrome, limited bandwidth). 

print

Intended for printed documents (applies to docs
viewed in print preview mode too).

projection Intended for projected presentations (ie: projectors or print to
transparencies).
screen Intended for computer screens.
tty Intended for media using a fixed-pitch character grid (ie:
teletypes or terminals).
tv Intended for television-type devices.

What is margin collapse in CSS?

How the browser reads selector from left-to-right or from right-to-left?

What are different ways you can visually hide content?

What is CSS specificity? What are the rules of CSS specificity?

Why !important is not a good practice?

What are the differences between position relative vs position absolute?

Which selector (ID, class or tagName) has highest priority in CSS and why?

The CSS units of length are: cm, em, in, mm, pc, pt, and px. Please explain each of them.

What are the differences between display:inline-flex and display:flex?

What is the difference between div * and div > * in case of CSS selectors?

How to maintain the aspect ratio of a div using CSS?

What are the differences between vh/vw and %?

What a “reset” CSS file and why we need it?

Show techniques of vertically and horizontally centred image inside a div

How the concept of inheritance is used in CSS?

Reference: