CSS Interview Questions And Answers

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

Ans: There are three ways to include css in our html page or web page.
Inline CSS
syntax: <div style="color:red;">some text here</div>
Internal CSS
Syntax: <style>
.selecter{
color:red // we can write any properties
}
</style>
External CSS
Syntax: <link rel="stylesheet" type="text/css" href="style.css">

2. If we have same css property for inline and interanl which one will apply?

Ans: inline css property is giving more priority. so inline css propery will applay
     priority order inline css -> internal css -> external css

3. What is an !important CSS?

Ans: if we write somthing like p{color:red}, p{color:blue !important};
      paragraph(p) will take the blue color.
      we are explicitly saying take the specipic property
      And also we can change the priority of Question 2

 6. What is Grouping?

Ans: 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 (every bit and byte is important) and makes it more readable. The following snippet applies the same background to the first three heading elements.

h1, h2, h3 {background: red;}

7. What are selectors in CSS?

Ans: Selectors help to select an element to which you want to apply a style.
    example: class, id, tags (p,h1, h6,<div> <span>) ;

8. What is block level element and inline element?

Ans: A block element is an element that takes up the full width available, and has a line break before and after it. <h1>, <p>, <li>, and <div> are all examples of block elements.
An inline element only takes up as much width as necessary, cannot accept width and height values, and does not force line breaks. <a> and <span> are examples of inline elements.

9.  Explain the difference between visibility:hidden and display:none.

Ans: 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. What are some of the new features and properties in CSS3?

Ans: Box model
New Web fonts
Rounded corners
Border Images
Box Shadows, Text Shadows
New Color schemes (RGBA)
Transform property
New Pseudo-classes
Multi-column layout
New Gradients

11. What is an ID selector?

Ans: An ID selector is a name assigned to a specific style. In turn, it can be associated with one HTML element with the assigned ID. Within CSS, ID selectors are defined with the # character followed by the selector name.
#example1: {background: blue;}
<p id="selector">...</p>

12. What is a class?

Ans: A class is a style (i.e., a group of CSS attributes) that can be applied to one or more HTML elements. This means it can apply to instances of the same element or instances of different elements to which the same style can be attached. Classes are defined in CSS using a period followed by the class name. It is applied to an HTML element via the class attribute and the class name.
.classexample {font-family: Helvetica; font-size: 20; background: black;}
<div class="classexample">....</div>

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

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

14. What are child selectors?

Ans: A child selector is used when you want to match an element that is the child of another specific element. The parent and child selectors are separated by spaces. The following selector locates an unordered list element within a paragraph element and makes a text within that element bold.
p > ul {font-weight: bold;}
classname1 classname2 { color:red};
classname2 is child class.

15. What are pseudo classes?

Ans: Pseudo classes allow you to identify HTML elements on characteristics (as opposed to their name or attributes). The classes are specified using a colon to separate the element name and pseudo class. A good example is the :link and :visited pseudo classes for the HTML A element. Another good example is first-child, which finds an element's first child element.
The following CSS makes all visited links red and green, the actual link text becomes yellow when the mouse pointer is positioned over it, and the text of the first element of a paragraph is bold.
a:link {font-color: red;}
a:visited {font-color: green;}
a:hover {font-color: yellow;}
p.first-child {font-weight: bold;}
p:nth-child(number){
color:red;
}

15. What are pseudo classes?

Ans: Pseudo classes allow you to identify HTML elements on characteristics (as opposed to their name or attributes). The classes are specified using a colon to separate the element name and pseudo class. A good example is the :link and :visited pseudo classes for the HTML A element. Another good example is first-child, which finds an element's first child element.
The following CSS makes all visited links red and green, the actual link text becomes yellow when the mouse pointer is positioned over it, and the text of the first element of a paragraph is bold.
a:link {font-color: red;}
a:visited {font-color: green;}
a:hover {font-color: yellow;}
p.first-child {font-weight: bold;}
p:nth-child(number){
color:red;
}

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

 Ans: They are CSS preprocessors. They are an abstraction layer on top of CSS. 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.

 17. Describe what a “reset” CSS file does and how it’s useful. Are you familiar with normalize.css? Do you understand how they differ?

 Ans: Resets are so wildly common in CSS that anyone who is a front end developer type has surely used them. Do they do so blindly or do they know why? The reason is essentially that different browsers have different default styling for elements, and if you don't deal with that at all, you risk designers looking unnecessarily different in different browsers and possibly more dramatic breaking problems.

Normalize you might call a CSS reset alternative. Instead of wiping out all styles, it delivers a set of reasonable defaults. It doesn't unset things that are already consistent across browsers and reasonable (e.g. bold headers). In that way it does some less than a reset. It also does some more than a reset in that it handles quirks you may never consider, like HTML5 audio element inconsistencies or line-height inconsistencies when you use sub and sup elements.

18. What is responsive design all about?

Ans: It's about making websites work wherever the web is. Different devices with different sizes and different capabilities. Responsive design is about taking one code base and making it work for all of them. Part of that is media queries and different visuals. Part of that is different resources (e.g. different JavaScript to handle touch vs click or different images to accommodate the screen).

19. What are the various techniques for clearing floats?

Ans: Floats are still incredibly common. As this is published, still probably the most cross-browser consistent way to build layout and grids. Anyone who has worked with them is aware of float collapsing. That is, floated element do not add to the height of a parent element. So for example if a parent element contained only floated elements, it would collapse to zero height. You can deal with that like:

Use a clearfix (bonus points for micro 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).
Bonus points for "create a new block formatting context". Possibly negative points for something like <br style="clear: both;">

20. What is Box model ?

Ans: 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.
Padding: inside the cell spacing.
padding has 4 properties
padding-right :10px,padding-bottom :10px,padding-left :10px, padding-top :10px,
sorform of padding:
padding: 10 10 20 10;

margin : want to move the box(div) from outside we need to use margin
margin also having 4 properties like padding
margin:10 10 4 4;

Border: - This defines the maximum area in which the element will be contained. We can make the border visible, invisible, define height and width etc.

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