CSS has become an integral part of web-design. It defines how attractive your page is at a glance. An organisation will always prefer a web developer with a strong command over CSS as they tend to produce modern and stylish designs. This CSS Interview Questions blog will prepare you for all sorts of CSS questions that could be asked in an interview.
2 Does margin-top or margin-bottom have an effect on inline elements?
No, mMargin-top or margin-bottom does not have an effect on the inline elements.
2 How is the border-box different from the content box?
Border-box consists of properties such as content, padding, and the border with respect to height and width. However, Content-box is a default value property used for the box-sizing as well as it helps to add border and padding to give proper height and width to the box without having a border and padding properties.
3 What is the difference between CSS variables and preprocessor(SASS, LESS, Stylus) variables?
How can you use CSS to control image repetition?
The background-repeat property is used to control the . Example:
background-repeat: none;
What are the benefits of CSS Sprites?
With CSS sprites, loading multiple s is not an issue.Â
1 How is opacity specified in CSS3?
Opacity refers to the degree to which the content is transparent or opaque. We can use the property named opacity which takes the values ranging from 0 to 1. 0 specifies that the element is completely transparent where 1 means that the element is completely opaque. We can use the opacity property as follows:
In the above example, an opacity of 60% is applied to the div section. The opacity property is not supported by the internet explorer browser. To make it work there, we need to use filter property as polyfill as shown in the example below.
What is specificity? How to calculate specificity?
A process of determining which CSS rule will be applied to an element. It actually determines which rules will take precedence. Inline style usually wins then ID then the class value (or pseudo-class or attribute selector), the universal selector (*) has no specificity. ID selectors have a higher specificity than attribute selectors.
Q What are the different ways to position a certain element in CSS?
The position property specifies the type of positioning method used for an element.
There are five different position values:
position: fixed;
position: static;
position: absolute;
position: sticky;
position: relative;
Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.
Q3 Explain the difference in approach when designing a responsive website over a mobile-first strategy?
These two approaches are not exclusive. Making a website responsive means some elements will respond by adapting its size or other functionality according to the device’s screen size, typically the viewport width, through CSS media queries.
For example, making the font size smaller on smaller devices.
@media (min-width: 601px) {
font-size: 24px;
@media (max-width: 600px) {
font-size: 12px;
A mobile-first strategy is also responsive, however, it agrees we should default and define all the styles for mobile devices, and only add specific responsive rules to other devices later. Following the previous example:
font-size: 12px;
@media (min-width: 600px) {
font-size: 24px;
A mobile-first strategy has 2 main advantages: