Css3 Interview Questions

1.What is the difference between CSS and CSS3 ?

A.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

2.List out CSS3 modules

A.Selectors, Box Model, Backgrounds and Borders, Text Effects, 2D/3D Transformations, Animations, Multiple Column Layout, User Interface

3.What new futures added in CSS3 for Borders and how Browser Support it?

A.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.

4.how we create border using images by CSS3

A.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; }

5.How you will create Box Shadow and text Shadow using CSS3

A.Like below we can create Box Shadow using CSS3 .boxshadowpcds { box-shadow: 10px 10px 5px #ccccc; } .textshadowpcds { text-shadow: 5px 5px 5px #FF0000; } and the

6.What is the CSS3 The background size Property

A.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; }

7.What is the word wrap / word wrapping in CSS3 ?

A.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;}

8.What is the CSS3 animation ?

A.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.

9.What is opacity in CSS3?

A.Opacity is 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>

10.What is the syntax of opacity in CSS3?

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

11.What is the syntax of word wrap in CSS3?

A.The general syntax word-wrap property of CSS3 is as follows: word-wrap: normal| break-word

12.How is white-space property of CSS3 used?

A.Syntax for the usage of white-space Property of CSS3. The general format of white-space Property of CSS3 is as follows: white-space: nnormal | pre | nowrap | pre-wrap | pre-line

13.Explain How flexibility is achieved more in CSS3?

A.Flexibility achieved is in greater ratio in CSS3 because of the feature of handling multiple style sheets in CSS3 and because of the modularized approach of CSS3.

14.Explain What are the values that can be taken by property white-space of CSS3?

A.The five values that can be taken by property white-space of CSS3 are normal, pre, nowrap, pre-wrap and pre-line.

15.Which prefix do you need to get CSS3 properties to work on older Mozilla Firefox browsers?

A.-moz-

16.What does the a stand for in RGBa?

A.alpha

17.What are the first three values of text-shadow in order?

A. horizontal, vertical, blur

18. How do four values work on border-radius

A.top-left, top-right, bottom-right, bottom-left

19.Has CSS3 been fully supported by all browsers?

A.No

20.How can you created rounded corners using CSS3?

A.border-radius: 30px;

21.How do you add shadow to elements in CSS3?

A.box-shadow: 10px 10px 5px grey;

22.How to you modify a border image using CSS3?

A.border-image: url(border.png) 30 30 round;

23.How to resize a background image using CSS3?

A.background-size: 80px 60px;

24.How to add text shadow using CSS3?

A.text-shadow: 5px 5px 5px grey;

25.How to force a word wrap using CSS3?

A.word-wrap: break-word;

26.Does the box-shadow support all browsers ?

A.True

27.In vertical offsets for box shadows, the (-1) means that the box-shadow will be below the box?

A.True

28.What does RGBa mean?

A.Red Green Blue alpha

29.What it the purpose of the border-radius?

A.To create a border with rounded edges

30.What is the new, easier way to import or modify fonts with CSS3?

A.@font-face

31.How to rotate objects using CSS3?

A.transform: rotate(30deg);

32.How to re-size/scale objects using CSS3?

A.transform: scale(2,4);

33.How to create transition effects using CSS3?

A.transition: width 2s;

34.Can you can specify more than one box shadow to an element?

A.Yes

35.What does the a in RGBa stand for?

A.alpha

36.Can the values of red, green and blue be interchanged in the RGBa notation?

A.No

37.Using the border-radius property, you can style either all four borders or none at all. This statement

A.False

38.Which vendor specific prefix do you have to use to target Opera?

A.-o-

39.Which new property, introduced in CSS3, allows you to wrap long words?

A.word-wrap

40.Which prefix do you need to get CSS3 properties to work on older Mozilla Firefox browsers?

A.-moz-

41.What are the first three values of text-shadow in order?

A.horizontal, vertical, blur

42.How do four values work on border-radius

A.top-left, top-right, bottom-right, bottom-left

43.What is the difference between CSS and CSS

A.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.

Comments