CSS Interview Questions
This page consists of CSS interview questions and answers.
For this we use the color property.
color
In the following example we are setting the color of the paragraphs to red.
p { color: red; }
For this we use the background-color property.
background-color
In the following example we are setting the background color of all the paragraphs to yellow.
p { background-color: yellow; }
For this we use the background-image property.
background-image
In the following example we are setting the background image of an element having id super.
super
#super { background-image: url('path/to/image.png'); }
For this we use the background-repeat property and set it to no-repeat.
background-repeat
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; }
For this we use the background-position property.
background-position
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; }
For this we use the background-attachment property.
background-attachment
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; }
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.
opacity
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.
filter: alpha(opacity=X)
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); }
Blue in hex code is #0000FF.
div#super { color: #0000FF; }
my-img
For this we will use the border property.
border
#my-img { border: 3px solid black; }
For this we will use the hover sudo class.
hover
#super:hover { color: red; }