CSS3 interview questions and Answers

In CSS3, the attr() function is used to retrieve the value of an attribute of the element selected and use it in the style sheet. This function also can be used on pseudo-elements, in which case pseudo-element's originating element attribute value will be returned.

CSS3 Image sprites are a collection of images put in a single image to reduce the number of server requests, thereby saving bandwidth, and avoiding multiple server requests for each image.

#homeDiv {
   width: 32px;
   height: 32px;
   background: url(img_cssprites.gif) 0 0;
}

In the above example, we have combined 3 images into a single GIF, cssprites and we can use CSS to display a specific part as required.

In CSS, the z-index property specifies the stack order of elements. An element having a greater stack order is placed in front of an element with a lower stack order.

Here’s its CSS Syntax:

z-index: auto|number|initial|inherit;

Here’s an example to set the z-index of an image:

img {
   position: fixed;
   left: 3px;
   top: 10px;
   z-index: -2;
}

White-space is a property within CSS which helps in controlling whitespace and other line breaks inside an element’s text. It has a default value of normal.

Here’s an example to display the different values within a white-space property:

p.e {
   white-space: nowrap;
}
p.f {
   white-space: normal;
}
p.g {
   white-space: pre;
}