CSS Interview Questions - Set 4

This page consists of CSS interview questions and answers.

Q1: How to set the color of an element?

For this we use the color property.

In the following example we are setting the color of the paragraphs to red.

p {
  color: red;
}

Q2: How to set the background color of an element?

For this we use the background-color property.

In the following example we are setting the background color of all the paragraphs to yellow.

p {
  background-color: yellow;
}

Q3: How to set the background image of an element?

For this we use the background-image property.

In the following example we are setting the background image of an element having id super.

#super {
  background-image: url('path/to/image.png');
}

Q4: How to prevent background image from repeating?

For this we use the background-repeat property and set it to no-repeat.

In the following example we are preventing repetition of the background image for an element having id super.

#super {
  background-image: url('path/to/image.png');
  background-repeat: no-repeat;
}

Q5: How to position background image to right bottom?

For this we use the background-position property.

In the following example we are setting the background image of an element having id super and positioning it at right bottom.

#super {
  background-image: url('path/to/image.png');
  background-position: right bottom;
  background-repeat: no-repeat;
}

Q6: How to prevent background image from scrolling with the page?

For this we use the background-attachment property.

In the following example we are setting the background image of an element having id super and preventing it from scrolling.

#super {
  background-image: url('path/to/image.png');
  background-attachment: fixed;
  background-repeat: no-repeat;
}

Q7: How to change the opacity of a background image?

For this we use the opacity property and set it to a numeric value from 0.0 to 1.0. Lower the value, more transparent the background image becomes.

In the following example we are setting the opacity of an image to 50% i.e. 0.5.

#super-image {
  background-image: url('path/to/image.png');
  background-attachment: fixed;
  background-repeat: no-repeat;
  opacity: 0.5;
}

For IE8 and earlier versions we use filter: alpha(opacity=X) where value of x is from 0 to 100.

So, the above style rule can be modified as follows.

#super-image {
  background-image: url('path/to/image.png');
  background-attachment: fixed;
  background-repeat: no-repeat;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

Q8: How to set the color of a div having id super to red using hex code?

Blue in hex code is #0000FF.

div#super {
  color: #0000FF;
}

Q9: How will you set a black border of 3px thickness around an image having id my-img?

For this we will use the border property.

#my-img {
  border: 3px solid black;
}

Q10: How will you change the color of a paragraph having id "super" to red when the mouse hover over it?

For this we will use the hover sudo class.

#super:hover {
  color: red;
}