CSS Interview Questions

1.      What is the difference between class and ID in CSS?

Class and ID are both used to select elements in CSS, but they are used in different ways. An ID is used to select a unique element, while a class can be used to select multiple elements. An ID is identified by a "#" symbol and a class is identified by a "." symbol.

2.      How can you create a gradient background in CSS?

A gradient background can be created in CSS using the linear-gradient() and radial-gradient() functions. These functions take a series of color stops as arguments and interpolate the colors between them to create the gradient.

3.      How can you create a responsive design in CSS?

A responsive design in CSS can be created using media queries. Media queries allow you to apply different styles based on the screen size, device type, and other factors. You can use CSS properties such as width, height, display, and float to control the layout of elements based on the screen size.

4.      What is the difference between inline and block elements in CSS?

Inline elements are elements that are placed inline with the text and only take up as much width as their contents, whereas block elements are elements that take up the full width of their parent container and start on a new line.

5.      How can you create a hover effect in CSS?

A hover effect in CSS can be created by using the :hover pseudo-class. This allows you to change the styles of an element when the user hovers over it.

6.      What is the difference between margin and padding in CSS?

Margin is the space outside of an element and padding is the space inside of an element. Margin is used to create space between elements and padding is used to create space within an element.

7.      How can you create a drop shadow effect in CSS?

A drop shadow effect can be created in CSS using the box-shadow property. This property takes several values, including the horizontal and vertical offset of the shadow, the blur radius, and the color of the shadow.

8.      How can you create a transition effect in CSS?

A transition effect can be created in CSS using the transition property. This property allows you to smoothly transition between different styles when an element is hovered or clicked.

9.      What is the difference between visibility: hidden and display: none in CSS?

The visibility property controls whether or not an element is visible, whereas the display property controls whether or not an element takes up space. visibility:hidden hides the element but the element still takes up space, whereas display:none removes the element and it takes up no space.

10.   How can you create a sticky navigation bar in CSS?

A sticky navigation bar can be created in CSS by using the position: sticky property. This property allows an element to remain fixed in a certain position on the page, even when the page is scrolled.

11.   How can you center an element in CSS?

An element can be centered in CSS using the margin: auto; property on the left and right sides, and by setting a fixed width on the element. This can be done by using the flexbox layout or grid layout.

12.   What is the difference between font-weight and font-style in CSS?

font-weight is used to specify the boldness of a font, with values such as normal, bold, and lighter/bolder. font-style is used to specify the style of a font, with values such as normal, italic, and oblique.

13.   How can you create a fixed background image in CSS?

A fixed background image can be created in CSS by using the background-attachment property and setting it to "fixed". This will cause the background image to stay in a fixed position while the rest of the content scrolls.

14.   How can you create a text animation effect in CSS?

A text animation effect can be created in CSS by using the @keyframes rule to define the animation, and then applying that animation to the text using the animation property.

15.   How can you create a border radius effect in CSS?

A border radius effect can be created in CSS using the border-radius property. This property allows you to specify the radius of the corners of an element, creating rounded corners.

16.   How can you create a text shadow effect in CSS?

A text shadow effect can be created in CSS using the text-shadow property. This property allows you to specify the horizontal and vertical offset, blur radius, and color of the shadow.

17.   How can you create a background color overlay effect in CSS?

A background color overlay effect can be created in CSS by using the ::before or ::after pseudo-elements, and then using the background-color property on them.

18.   How can you create a hover effect on multiple elements in CSS?

A hover effect on multiple elements can be created in CSS by using a class or an ID to group the elements together, and then applying the hover effect to that class or ID.

19.   How can you create a responsive image in CSS?

A responsive image can be created in CSS by using the max-width and max-height properties, along with the width and height properties. This allows the image to scale up or down based on the size of the screen.

20.   How can you create a parallax effect in CSS?

A parallax effect can be created in CSS by using the background-attachment property and setting it to "fixed". This will cause the background image to stay in a fixed position while the rest of the content scrolls. Additional CSS and JavaScript can be used to create a more complex parallax effect.