The front-end developers interview always covers CSS questions. The CSS related questions goes from basic to advanced level. The basic knowledge of CSS is vital for 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 bit reluctant doing it. But 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?
To calculate the line-height space on top and bottom of an element, substract the font-size and then distribute the remaining pixels equally on top and bottom.
When font-size: 16px and line-height: 1 then?
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?
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?
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?
|Respect left & right margins and paddings, but not top & bottom||Respect all margins and paddings||Respect all margins and paddings|
|Ignore the width and height||Respect width and height||Respect width & height, takes full width if not defined|
|Allow other elements to sit to the element’s left and right||Allow other elements to sit to the element’s left and right||Force a line break after the block element|
What are the differences between content-box and border-box of CSS box model?
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:
Which one is better between translate() and absolute positioning?
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?
Suitable/intended for all devises (default).
Intended for speech synthesizers.
Intended for braille tactile feedback devices.
Intended for paged braille printers.
Intended for handheld devices (typically small
Intended for printed documents (applies to docs
Intended for projected presentations (ie: projectors or print to
|screen||Intended for computer screens.|
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?
Advanced CSS questions