Most common CSS Interview Questions and answers

CSS stands for Cascading Style Sheets language. It is a standard for applying style to HTML elements. CSS is widely popular since it eliminates of writing too many HTML tag to make the document more reader friendly

I have listed 20 Most commonly asked CSS interview questions with answers.

1. What are different ways to apply styles to a Web page?

Inline CSS,

Embedded CSS

Linked CSS or External Styles

Imported CSS: importing one stylesheet in the main stylesheet (@import url(‘/css/layout.css’);)

2. What is the difference between an ID selector and CLASS?

An ID selector identifies and sets style to only one occurrence of an element, while CLASS can be attached to any number of elements.

3. What is CSS Grouping?

When more than one selector shares the same declaration, they may be grouped together via a comma-separated list; this allows you to reduce the size of the CSS

4. What are Child Selectors?

A child selector is used when you want to match an element that is the child of another specific element.

(div > p {font-size: 13px;})

5. What are Pseudo Classes?

Pseudo classes allow you to identify HTML elements on characteristics as opposed to their name or attributes.

a:link,

a:visited,

a:hover

6. What is the CSS Box Model?

CSS box model is made up of margins, borders, padding, and content.

Box model provides a structured way to space elements in relationship to each other.

7. What is the difference between inline and block elements?

A block element is an element that takes up the full width available, and has a line break before and after it. For example: h1, p and div.

An inline element only takes up as much width as necessary, or it takes width as per the content inside. It will not accept width and height values, and does not force line breaks. Example: a and span.

8. What is z-index and how is it used? What is the default value of Z-index?

The z-index helps specify the stack order of positioned elements that may overlap one another. The z-indexdefault value is zero, and can take on either a positive or negative number.

9. What is the difference between visibility:hidden and display:none?

visibility:hidden simply hides the element, while it will still take up space and affect the layout of the document.

display:none also hides the element, but will not take up space and the page will appear as if the element is not present.

10. Why shorthand properties are used? Give examples.

Font shorthand property sets all the font properties in one declaration.

.classname {

    font:bold 1em/1.2em Arial,"times new roman",serif;
}

Read more about Font Shorthand

11. What are Sass, LESS, and Stylus? Why do people use them? How does something like Compass relate to Sass?

They are CSS preprocessors. They are a special syntax/language that compile down into CSS. They make managing CSS easier, with things like variables and mixins to handle vendor prefixes (among other things). They make doing best practices easier, like concatenating and compressing CSS.

12. What are the various techniques for clearing floats?

Use a clearfix.

Float the parent as well.

Use an overflow property other than “visible” on the parent (bonus points for listing downsides like cutting off shadows).

13. What are sprites and why would use them? How do you go about creating them? What are possible alternatives to sprites?

Sprites are essentially multiple images combined into one. Performance is the reason that they are used. HTTP requests will be reduced which will result in faster loading of the pages.

Use online tools, Photoshop (Takes time), Spriting with Compass

14. What do you mean by responsive design?

It’s about making websites work on different platforms/devices. Different devices with different sizes and different capabilities. Responsive design is about taking one code base and making it work for all of them. Media queries used for achieving this.

15. What is the difference between CSS and CSS3 ?

CSS3 is upgreaded version of CSS with new future like Selectors,Box Model, gradient backgrounds, multiple background, Text Effects,2D/3D Transformations, Animations, Multiple Column Layout etc…

16. How to create Rounded Corners using css3? Give example

div{

border:2px solid #ff0000;
border-radius:25px;

-moz-border-radius:25px; /* Firefox */
-webkit-border-radius:25px; /* Chrome and Safari */

}

-o-border-radius:25px; /* Opera */

17. What is the CSS3 background size Property? How to use it?

The background-size property specifies the size of the background image.

.myClass {

background:url(background.jpg);

-moz-background-size:80px 60px; /* Firefox 3.6 */

background-size:80px 60px; /* or we can do background-size:100% 100%;*/
background-repeat:no-repeat;

}

18. What is the word wrap 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

.wordwrappcds{word-wrap:break-word;}

19. What CSS3 box-sizing Property?

The box-sizing property is used to tell the browser what the sizing properties (width and height) should include. box-sizing to “border-box” forces the browser to render the box with the specified width and height, and place the border and padding inside the box.

20. What is CSS3 backface-visibility Property?

The backface-visibility property defines whether or not an element should be visible when not facing the screen.This property is useful when an element is rotated, and you do not want to see its backside.

Regards : Web Design Company