Google News
CSS3 Interview Questions
The first working draft of CSS3 came in 19-01-2001. but it was initially declared early in the June 1999. The main difference between css2 and css3 is Media Queries, Namespaces, Selectors Level 3, Color.
CSS3 has been split into "modules". It contains the "old CSS specification". In addition, new modules are added.

Ex :  Selectors, Box Model, Backgrounds, Borders, Gradients, shadows, Image Values and Replaced Content, Text Effects, 2D Transformations, 3D Transformations, Transitions, Animations,  Multiple Column Layout, User Interface, etc,..
3 following border futures added :
• border-radius
• box-shadow
• border-image
To Allow long words to be able to break and wrap onto the next line in css3 we used word-wrap property like below class
When the animation is created in the @keyframe, bind it to a selector, otherwise the animation will have no effect.
Bind the animation to a selector by specifying at least these two CSS3 animation properties :
• Specify the name of the animation
• Specify the duration of the animation
Opacity is a style property used to show or hide the html element.
For example 0 for hide and 1 for show.

<p style="opacity: 0">Show Me</p>
<p style="opacity: 0.5">Show Me</p>
<p style="opacity: 1">Show Me</p>

The Opacity declaration sets how opaque an element is.An opacity value of 1 means the element is fully opaque. An opacity value of 0 means an element is not at all opaque, i.e. fully transparent.This elements opacity is 0.5 .
Note : That both the text and the background-color are affected by the opacity level.
If you want to use the multiple background ,we can insert as follows...

background-image : url(image.png), url(image-2.png), url(image-3.jpg); also we can mention the position of the image either percentage value or top left, left center like this.
Media queries are introduced in CSS3, which are directly used for making website responsive i.e. RWD (Responsive Web Designing). Get more guidance on Responsive Web Design Tutorials with step by step guidance!
Flexbox is the new layout modal being used in CSS3. Used along with display, its primary function is to control the elements behaviour in multiple screen sizes and devices.
CSS3 multiple Column property is easiest way of dividing section of particular element just like in newspaper and there are various rule applied to it regarding count, gap, rule, style, width, color and span.
CSS3 transitions are the properties which lets change effect using CSS smoothly over specified duration. Multiple changes simultaneously are allowed within one section.
Media queries are the latest web standard for crafting adaptable style sheets for tablets, Desktop, mobiles and iOS enabled devices. They are applied using height, width of the device, viewport, orientation and resolution. So any structure design can be altered for making design responsive.
CSS3 has introduced mainly Two types of user interface that has been described as follows:

1. resize : The resize is a such property of User Interface, by which you can resize your div layout on your browser. Three features of resize you can use 

i.   resize:both 
ii.  resize:vertical 
iii. resize:horizontal.

2. outline-offset : The outline-offset is such property of the CSS3 User Interface, which can be used to define the space between the element's border and its outline.
CSS3 3D transform feature you can perform basic transform manipulations such as move, rotate, scale and skew on elements in a three-dimensional space.

The following 3D transformation methods:

1. rotateX()
2. rotateY()
3. rotateZ()
% - Defines a measurement as a percentage relative to another value, typically an enclosing Defines a measurement in centimeters. div {margin-bottom: 2cm;}

em - A relative measurement for the height of a font in em spaces. Because an em unit is equivalent to the size of a given font, if you assign a font to 12pt, each "em" unit would be 12pt; thus, 2em would be 24pt.

ex - This value defines a measurement relative to a font's x-height. The x-height is determined by the height of the font's lowercase letter x.

in - Defines a measurement in inches.

mm - Defines a measurement in millimeters.

pc - Defines a measurement in picas. A pica is equivalent to 12 points; thus, there are 6 picas per inch.

pt - Defines a measurement in points. A point is defined as 1/72nd of an inch.

px - Defines a measurement in screen pixels.
The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities. 
An area of a document laid out using flexbox is called a flex container. To create a flex container, we set the value of the area's container's display property to flex or inline-flex. As soon as we do this the direct children of that container become flex items. As with all properties in CSS, some initial values are defined, so when creating a flex container all of the contained flex items will behave in the following way.
* Items display in a row (the flex-direction property's default is row).
* The items start from the start edge of the main axis.
* The items do not stretch on the main dimension but can shrink.
* The items will stretch to fill the size of the cross axis.
* The flex-basis property is set to auto.
* The flex-wrap property is set to nowrap.
box-shadow: 10px 10px 5px grey; 
shadow-right: 10px;
shadow-bottom: 10px; 
shadow-color: grey; 
alpha-effect[shadow]: 10px 10px 5px grey;
background-size: 80px 60px; 
bg-dimensions: 80px 60px; 
background-proportion: 80px 60px; 
alpha-effect: bg-resize 80px 60px;
object-rotation: 30deg; 
transform: rotate(30deg); 
rotate-object: 30deg; 
transform: rotate-30deg-clockwise;
transform: scale(2,4); 
scale-object: 2,4; 
scale: (2,4);

Yes it is possible, by using CSS3 border image property we can use image as a border.

border: url(logo.png); 
border: image url(logo.png); 
border-image: url(logo.png) 30 30 round;
The::first-line selector is used to add a style to the first line of the specified selector.
p::first-line {
  background-color: yellow;
There are four most commonly used multi background properties, they are:
background-clip : Used to declare the painting area of the background
background-image : Used to specify the background image
background-origin : Used to specify position of the background images
background-size : Used to specify size of the background images
Here is the CSS3 code for creating multi background images.
   #multibackgroundimg {
             background-image: url(imgs/logo.png), url(imgs/sample_logo.png);
             background-position: left top, left top;
             background-repeat: no-repeat, repeat;
             padding: 75px;
HSLA stands for hue, saturation, lightness and alpha.
There are mainly three Text related features are introduced, they are :
* text-overflow
* text-emphasis
* text-align-last
* word-wrap
* word-break
Web fonts allows users to use the fonts in CSS3, which are not installed on local system.
There are five types of web fonts formats are there, they are:
1) TTF – TrueType Fonts
2) OTF – OpenType Fonts
3) WOFF – The Web Open Font Format
4) SVG Fonts
5) EOT – Embedded OpenType Fonts
Here are the some commonly used values in 2D Transforms,
matrix(n,n,n,n,n,n) : Used to defines matrix transforms with six values
translate(x,y) : Used to transforms the element along with x-axis and y-axis
translateX(n) : Used to transforms the element along with x-axis
translateY(n) : Used to transforms the element along with y-axis
scale(x,y) : Used to change the width and height of element
scaleX(n) : Used to change the width of element
scaleY(n) : Used to change the height of element
rotate(angle) : Used to rotate the element based on an angle
skewX(angle) : Used to defines skew transforms along with x axis
skewY(angle) : Used to defines skew transforms along with y axis
Here are the some commonly used values in 3D Transforms,
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) : Used to transforms the element by using 16 values of matrix
translate3d(x,y,z) : Used to transforms the element by using x-axis,y-axis and z-axis
translateX(x) : Used to transforms the element by using x-axis
translateY(y) : Used to transforms the element by using y-axis
translateZ(z) : Used to transforms the element by using y-axis
scaleX(x) : Used to scale transforms the element by using x-axis
scaleY(y) : Used to scale transforms the element by using y-axis
scaleY(y) : Used to transforms the element by using z-axis
rotateX(angle) : Used to rotate transforms the element by using x-axis
rotateY(angle) : Used to rotate transforms the element by using y-axis
rotateZ(angle) : Used to rotate transforms the element by using z-axis
Here is the list of most commonly used multi column values, they are:
column-count : Used to count the number of columns that element should be divided
column-fill : Used to decide, how to fill the columns
column-gap : Used to decide the gap between the columns
column-rule : Used to specifies the number of rules
rule-color : Used to specifies the column rule color
rule-style : Used to specifies the style rule for column
rule-width : Used to specifies the width
column-span : Used to specifies the span between columns
Here is the code for arranging text in multi columns,
.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;
CSS3 outline, draws a line around the element at outside of boarder.
Sample Code for creating Outline :
	div {
	  margin: 20px;
	  padding: 10px;
	  width: 300px;
	  height: 100px;
	  border: 5px solid pink;
	  outline: 5px solid green;
	  outline-offset: 15px;
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 */
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 */