Advanced CSS3 Interview Questions and Answers

Advanced CSS3 Interview Questions and Answers

In Web Development CSS plays a great role to apply Styles. Using CSS we can Centralize Styles for a Web app. Today there are plenty of vacancies available for UI developers. Among the skill sets of a UI professional, CSS is one of the major Skill. In this week-end are you planning to attained an interview for UI developer? If so look at our advanced CSS3 interview questions in below. I am sure these questions and answers will help you to hack the interviewer.

What is CSS?

The full name of CSS is Cascading Style Sheet (CSS). It used to apply Styles in HTML documents. CSS centrally stores the style. It’s better to keep a CSS file rather then writing CSS classes in the html head with Style tag. In professional web development practice to avoid in-line CSS. The extension of CSS3 file is .css.

What are the ways to Apply CSS styles in a HTML documents?

There are 4 different ways to Apply CSS3 in a HTML document. These are In-line CSS, Embedded CSS, Linked CSS & Imported CSS.


In-line CSS<div style=”font-size: 14px; color: #FF0000;”>This is in Red Color</p>

Embedded CSS<style type=”text/css”>
h2 {
font-size: 14px;
color: #2d2d00;
font-weight: 600;

Linked CSS<link rel=”stylesheet” href=”custom/custom.css” type=”text/css” media=”screen, projection” />

Imported CSS@import url(‘/css/color.css’);

What is the difference between an ID & CLASS selector in CSS3?

Using ID selector we can apply style to a specific element while using class we can apply the same style to many.

Explain me the CSS Box Model.

The CSS3 box model is the rectangular area around the HTML elements. CSS3 Box Model consist of 4 different parts. Margin, Border, Padding & Content. Margin, Border & Padding can be declared using the following CSS3 syntax.

padding: 10px;
border: 5px solid gray;
margin: 0px;

Using CSS3 box model it helps to align the HTML elements.

What is Grouping in CSS3?

About CSS3 Grouping let us discuss an example to make you more clear on this. Some time in our page we have h1, h2, h3 .. h5, h6 tags. If I want to apply font color red to all this tags. Here grouping comes. Let you watch the below example. It will clear your understanding.

h1, h2, h3 {color: red;}

What are Child Selectors in CSS?

In CSS3 Child Selector used to to apply styles upon the child elements of a parent elements. Lets for an example I have a ul tag inside a paragraph. Here ul is the child element of paragraph. To apply CSS styles we can use the following CSS3 syntax.

p &gt; ul { font-size:20px; }

Give some examples of CSS Pseudo-Class.

Using CSS pseudo Class we can add special effects to some Selectors.

Example of Anchor Pseudo Class

/* style for unvisited link */
a:link { color: #FF0000; font-size:12px; }

/* style for visited link */
a:visited { color: #00FF00; font-size:14px; }

/* on mouse over link */
a:hover { color: #FF00FF; font-size:16px; }

/* selected link */
a:active { color: #0000FF; font-size:12px; }

Example of First Child Pseudo Class

p:first-child { color: #0000FF; }

What is the use of CSS3 sprites?

In a web page we are using many images to decorate. All these image takes time to load individually. This old fashion of image loading increases http request to server. It hampers the performance of web page. To resolve this CSS3 comes with sprites. It helps to keep many images in a single file. Due this it decreases the http request to the server. Gives better performance and taking less server time.

Tell me some New features in CSS3.

CSS3 is the 3rd revision of CSS. Compare to CSS2 CSS3 introduced the following new features.

Calculating value with calc()

In CSS2 to set dynamic width we use JavaScript or Jquery. This problem is resolved in CSS3. CSS3 introduced calc() function. For an example if you want to set a div (#container) with 100px less then the 100% width then you can do the following using CSS3 calc method.

#container {
/* Calculate the width Dynamically */
width: calc(100% - 100px);
margin: 0 auto;


In the early age of programming we have some limited fonts. To add a new font we need to download the respective font file (*.ttf) & need to copy that file into fonts directory. CSS3 web-fonts with Google fonts resolve this problem in the way of web development. Today fonts are not only displaying Alphabets or Numbers it is also taking care of icons. Let’s talk about the popular web-font “font-awesome”. It comes with scalar vector icons.

CSS3 by implementing @font-face make font integration much more easier then the classical web designing. After applying @font-face we can use font or font-family to integrate the web-fonts in our application. Look at the example below.

@font-face {
font-family: 'demo-web-fonts';
src: url('') format('woff'), 
/* Compatible for Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('') format('truetype');
/* Compatible for Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */

then we can refer this web-fonts using the following syntax.

body {
font-family: 'demo-web-fonts', Fallback, sans-serif;

CSS3 Animation

CSS3 Selectors

In addition to CSS2, CSS3 introduced some new Selectors. Using these selectors you can choose DOM elements based on their attributes. So you don’t need to specify classes & id for each elements.

CSS3 Rounded Corner

In the old age its difficult to round the corner of a div or paragraph. This problem is addressed by CSS3. Using border-radius property we can easily round the corner of HTML elements.

Border Image

Using border-image feature in CSS3 you can display custom image to border. To show you an example in below I applied border-image to a paragraph element. This paragraph is width of 300px. Text added in paragraph is center aligned. To apply border-image first I applied border with 20px height & background transparent. In border image I referred an demo image.

p {
text-align: center;
padding: 15px;
width: 300px;
margin: 0 auto;
border: 20px solid transparent;
border-image: url( 20 20 round;

CSS3 Box Shadow

Using box shadow you can create a drop shadow for a HTML elements. In CSS3 using the property box-shadow this can be achieved by writing a single line of CSS code.

CSS3 Text Shadow

In the old age of web its quite difficult to add Text Shadow over a web page text. In CSS3 it is done using text-shadow property. Using a single line of code we can achieve with a text label.

What is the Syntax of Opacity in CSS3?

style="opacity:0.4; filter:alpha(opacity=40)"

Firefox uses the property opacity:x for transparency, while IE uses filter:alpha(opacity=x).

What is z-index & How to use it in CSS?

The z-index property specifies the stack order of an element. Using z-index we can bring an element with greater stack order is always in front of an element with a lower stack order. Example shown below.


<img src=”jharaphula.gif” width=”400″ height=”400″ />
<div>Because the image has a z-index of -1, it will be placed behind the text.</div>

How to set border radius of a div for IE, FF & Chrome using CSS3?

CSS3 provides a new attribute border-radius to set round corner border. This works on IE. For Firefox & Chrome there are CSS hacks. In Firefox we have to use -moz-border-radius & in case of Chrome -webkit-border-radius. Look at the following CSS class.

border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;

What is clearfix hack in CSS?

When we apply float in elements locate inside a container that element doesn’t automatically force to adjust height. Once you declared float means it no longer available under a parent element. We can have 2 CSS hacks to fix this.


Example of clearfix class

.clearfix {
display: inline-block;
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;

For alignment problems clearfix is a very useful hack in CSS.

What is CSS media queries?

In the way of responsive designing media queries act like a filter to CSS Styles. Using Media Queries we can change styles based on various Resolution & Devices. While declaring CSS with link tab media keyword helps to declare the type of media. Using media we can set min-width, max-width, min-height, max-height, orientation=portrait & orientation=landscape like attributes. Example of media queries are

Syntax to implement media query:

@media not|only mediatype and (media feature) {
//Your CSS Code Goes here...
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="media-related.css" />

Example of media query:

@media screen and (max-width: 600px) {
body {
background-color: #CCCCCC;
<link rel="stylesheet" media="(max-width: 840px)" href="max-840px.css">
<link rel="stylesheet" media="(min-width: 840px)" href="min-840px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portraitStyle.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscapeStyle.css">

What are the major CSS properties?

While designing a HTML page the major CSS properties we used are Background, Font, Text, Outline, Border, Margin, Padding, List, Table & Width.

What is the difference between Fixed Width Layouts & Liquid Layouts?

While designing a website if we fixed the web page width to a specific numerical value this is called Fixed width Layout. Fixed layout web pages are regardless about the client browser width.

Liquid layout is flexible depending upon the client browser. It is not a fixed width. Depending upon the client browser the web page will adjust automatically. Liquid layouts are always use percentage to adjust width. You can also say responsive UI designing is nothing but the advanced level of Liquid layout. Liquid layouts are more professional approach to web designing compare to fixed layout web pages.