CSS3 Interview Questions
1 .
Can you write CSS3 code to arrange text in multi columns?
Here is the code for arranging text in multi columns,
 
<style>
.multi_col {
	/* Column count property */
	-webkit-column-count: 4;
	-moz-column-count: 4;
	column-count: 4;

	/* Column gap property */
	-webkit-column-gap: 40px;
	-moz-column-gap: 40px;
	column-gap: 40px;

	/* Column style property */
	-webkit-column-rule-style: solid;
	-moz-column-rule-style: solid;
	column-rule-style: solid;
	}
</style>
2 .
What is CSS3 Outline offset?
CSS3 outline, draws a line around the element at outside of boarder.
 
Sample Code for creating Outline :
 
<style>
	div {
	  margin: 20px;
	  padding: 10px;
	  width: 300px;
	  height: 100px;
	  border: 5px solid pink;
	  outline: 5px solid green;
	  outline-offset: 15px;
 	}
</style>
3 .
What is the CSS3 hsl() function?
The hsl() function define colors using the Hue-saturation-lightness model (HSL). HSL stands for hue, saturation, and lightness – and represents a cylindrical-coordinate representation of colors.
 
Example :
 
#p1 {background-color:hsl(120,100%,50%);} /* green */
#p2 {background-color:hsl(120,100%,75%);} /* light green */
#p3 {background-color:hsl(120,100%,25%);} /* dark green */
#p4 {background-color:hsl(120,60%,70%);} /* pastel green */
4 .
What is CSS3 hsla() Function?
The hsla() function define colors using the Hue-Saturation-Lightness-Alpha model (HSLA). HSLA color values are an extension of HSL color values with an alpha channel – which specifies the opacity of the color.
 
Example :
 
#p1 {background-color:hsla(120,100%,50%,0.3);} /* green */
#p2 {background-color:hsla(120,100%,75%,0.3);} /* light green */
#p3 {background-color:hsla(120,100%,25%,0.3);} /* dark green */
#p4 {background-color:hsla(120,60%,70%,0.3);} /* pastel green */