HTML
   HTML5
   CSS
   CSS3
   JavaScript
   jQuery
   AngularJS
   Articles
   Tech Articles
   Blog
Google News
logo
CSS3 Interview Questions
1 .
What is CSS3 ?
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.
2 .
Explain some CSS3 Modules.
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 .
What new futures added in CSS3 for Borders and how Browser Support it ?
3 following border futures added :
• border-radius
• box-shadow
• border-image
4 .
What is the word wrap / word wrapping in CSS3 ?
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
.wordwrap{word-wrap:break-word;}
5 .
What is the CSS3 animation ?
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
6 .
What do we mean by Opacity in CSS3 ?
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.
7 .
How is multiple background images handled in CSS3 ?
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.
8 .
How CSS3 is related to responsive web designing ?
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!
9 .
Describe about new CSS3 property ‘Flex’ in few words.
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.
10 .
What is CSS3 multiple column property ?
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.
11 .
What are CSS3 transitions ?
CSS3 transitions are the properties which lets change effect using CSS smoothly over specified duration. Multiple changes simultaneously are allowed within one section.
12 .
Explain the use of media queries in CSS3.!
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.
13 .
How many CSS3 User Interfaces.!
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.
14 .
What is CSS3 3D Transforms ?
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()
15 .
Explain all the measurement units in CSS3?
% - Defines a measurement as a percentage relative to another value, typically an enclosing element.cm 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.
16 .
What is CSS3 Flexbox?
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.
17 .
How do you add shadow to elements in CSS3?
box-shadow: 10px 10px 5px grey; 
shadow-right: 10px;
shadow-bottom: 10px; 
shadow-color: grey; 
alpha-effect[shadow]: 10px 10px 5px grey;
18 .
How to resize a background image using CSS3?
background-size: 80px 60px; 
bg-dimensions: 80px 60px; 
background-proportion: 80px 60px; 
alpha-effect: bg-resize 80px 60px;
19 .
How to rotate objects using CSS3?
object-rotation: 30deg; 
transform: rotate(30deg); 
rotate-object: 30deg; 
transform: rotate-30deg-clockwise;
20 .
How to re-size/scale objects using CSS3?
transform: scale(2,4); 
scale-object: 2,4; 
scale: (2,4);
21 .
Is it possible to create border as a Image in CSS3?

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;
22 .
How can you change the first line of paragraph color using css3?
The::first-line selector is used to add a style to the first line of the specified selector.
 
p::first-line {
  background-color: yellow;
}
23 .
What are the most commonly used Multi Backgroud properties in CSS3?
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
24 .
Can you write CSS3 code for creating Multi Background Images?
Here is the CSS3 code for creating multi background images.
 
<style>
   #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;
            }
</style>
25 .
What HSLA stands for in CSS3?
HSLA stands for hue, saturation, lightness and alpha.
26 .
What are the newly introduced Text related features in CSS3?
There are mainly three Text related features are introduced, they are :
 
* text-overflow
* text-emphasis
* text-align-last
* word-wrap
* word-break
27 .
What are the different web fonts formats in CSS3?
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
28 .
What are the common values used in 2D Transforms?
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
29 .
What are the common values used in 3D Transforms?
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
30 .
What are the values associated with multi columns?
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
31 .
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>
32 .
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>
33 .
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 */
34 .
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 */
Advertisement