.

CSS3 Interview Questions And Answers


HTML5 Interview Questions

Web designing Interview Questions

css 5 Interview Questions and AnswersCSS3 Interview questions and answers for senior web designer as Cascading Style Sheets (CSS) accepted by all modern Browsers with these css model Selectors,Box Model, Backgrounds and Borders, Text Effects,2D/3D Transformations, Animations, Multiple Column Layout,User Interface


Top CSS3 interview questions and answers

Questions : 1 What is the difference between CSS and CSS3 ?
Answers : 1 CSS3 is upgreaded version of CSS with new future like Selectors,Box Model, Backgrounds and Borders, Text Effects,2D/3D Transformations, Animations, Multiple Column Layout,User Interface etc
   
Questions : 2 List out CSS3 modules
Answers : 2 Below are the listed major modules
  • Selectors
  • Box Model
  • Backgrounds and Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations
  • Multiple Column Layout
  • User Interface
   
Questions : 3 What new futures added in CSS3 for Borders and how Browser Support it?
Answer : 3 following border futures added
  • border-radius
  • box-shadow
  • border-image


and all modern Browser Support it like below

Internet Explorer 9 supports border-radius and box-shadow

Firefox requires the prefix -moz- for border-image.

Chrome and Safari requires the prefix -webkit- for border-image.

Opera requires the prefix -o- for border-image.
   
Questions : 4 How you will create Rounded Corners using css3
Answer : 4 We have to creat a class like below
<style>
.roundc{
border:2px solid #ff0000;
border-radius:25px;
background:#dddddd;
width:300px;
-moz-border-radius:25px; /* Firefox */
-webkit-border-radius:25px; /* Chrome and Safari */
-o-border-radius:25px; /* Opera */
}
</style>
and we have to add this class where we want the round corner like in below div
<div class="roundc" > this is the round corner by css3 </div>
This is the div and round corner by css3
   
Questions : 5 how we create border using images by CSS3
Answers : 5 By using border-image: property of css3 we can create a border using images like below
.roundpcds
{
border-image:url(borderpcds.png) 30 30 round;
-moz-border-image:url(borderpcds.png) 30 30 round; /* Firefox */
-webkit-border-image:url(borderpcds.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(borderpcds.png) 30 30 round; /* Opera */
}
.stretchPcds
{
-moz-border-image:url(borderpcds.png) 30 30 stretch; /* Firefox */
-webkit-border-image:url(borderpcds.png) 30 30 stretch; /* Safari and Chrome */
-o-border-image:url(borderpcds.png) 30 30 stretch; /* Opera */
border-image:url(borderpcds.png) 30 30 stretch;
}
   
Questions : 6 How you will create Box Shadow and text Shadow using CSS3
Answers : 6 Like below we can create Box Shadow using CSS3 .boxshadowpcds
{
box-shadow: 10px 10px 5px #ccccc;
}
.textshadowpcds
{
text-shadow: 5px 5px 5px #FF0000;
} and then need to use these class boxshadownpcds ,textshadowpcds
   
Questions : 7 What is the CSS3 The background size Property
Answers : 7 The background-size property specifies the size of the background image.
As we know Before CSS3, the background image size was find out by the real size of the image. In CSS3 it is possible to specify the size of the background image, which allows you to re-use background images in different ways.
.pcdsbp1
{
background:url(background.gif);
-moz-background-size:80px 60px; /* Firefox 3.6 */
background-size:80px 60px; /* or we can do background-size:100% 100%;*/
background-repeat:no-repeat;
}
   
Questions : 8 What is the word wrap / word wrapping in CSS3 ?
Answers : 8 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
.wordwrappcds{word-wrap:break-word;}
   
Questions : 9 What is the CSS3 animation ?
Answers : 9

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
   

Next Page 1 | Next Page 2 | Next Page 3

Search More interview questions and answers on CSS3



You have a Question on CSS3 fill the form below for answer

Name* :                   

Email Id* :               

Contact Number* :   

Your Question :* :  

Username :
Password :
    Register
  • E learning for PCDS user
Facebook | Twitter

  

  • Entertainment for PCDS user