CSS Interview Questions and Answers

Q1. What are Cascading Style Sheets? 
A Cascading Style Sheet (CSS) is a list of statements (also known as rules) that can assign various rendering properties to HTML elements. Style rules can be specified for a single element occurrence, multiple elements, an entire document, or even multiple documents at once. It is possible to specify many different rules for an element in different locations using different methods. All these rules are collected and merged (known as a “cascading” of styles) when the document is rendered to form a single style rule for each element.

Q2. Is CSS case sensitive?
CSS is not case sensitive. However, attributes associated along with the CSS command such as font families, URLs, or other factors can be case sensitive.

Q3. What Is Wrapping In Css3?
Wrapping is a vital property for proper display of contents in web pages. If wrapping is disabled then the user could not display and view long lines that goes outside the window boundary and thus becomes useless.

Q4. What is a CSS filter?
CSS filter is by far one of the most advantageous characteristic of this language. It enables the coders to write a totally different code or make changes to the existing design patterns that further allow the web browsers to receive the CSS coding specifications that they support, thereby disabling any instances of changes that the browser may make to the code.

Q5. What is class? 
Class is a group of 1) instances of the same element to which an unique style can be attached or 2) instances of different elements to which the same style can be attached.
1. The rule P {color: red} will display red text in all paragraphs. By classifying the selector P different style can be attached to each class allowing the display of some paragraphs in one style and some other paragraphs in another style.
2. A class can also be specified without associating a specific element to it and then attached to any element which is to be styled in accordance with it’s declaration. All elements to which a specific class is attached will have the same style.

To classify an element add a period to the selector followed by an unique name. The name can contain characters a-z, A-Z, digits 0-9, period, hyphen, escaped characters, Unicode characters 161-255, as well as any Unicode character as a numeric code, however, they cannot start with a dash or a digit. (Note: in HTML the value of the CLASS attribute can contain more characters). (Note: text between /* and */ are my comments).

Q6. Which browsers support CSS?
It depends on your definition of “support.” If you are interested in those browsers which makes some attempt at supporting CSS, no matter how partial or bug-ridden, then the list is:

• Internet Explorer 3.0 and above
• Navigator 4.0 and above
• Opera 3.6 and above
• Konqueror
• Arena
• Emacs-w3
• Amaya
• Lexicon
• XPublish by Media Design in•Progress

If instead you’re interested in those browsers which are known to do a credible job of bug-free and mostly completel support for CSS1, then the list narrows somewhat dramatically:

• Internet Explorer 5.0 for Macintosh and above
• Internet Exporer 5.5 for Windows and above
• Netscape Navigator 6.0 and above
• Opera 4.0 and above

While none of these browser can be claimed to have a perfect implementation of CSS1, they are all quite good and can be relied upon to operate in a consistent fashion for most of CSS1.

Q7. 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).

Q8. What are rules?
Rules are the set of selectors along with a declaration block. A declaration block is a list of declarations.

Q9. How many values a �Position� attribute offers?
A position attribute offers the following values:

• Absolute
• Relative
• Static
• Fixed
• Inherit

Relative value is the default value.

Q10. What are vertical control limitations?
The limitations faced during the vertical placement of objects in CSS are called vertical control limitations.

Q11. What Is The Syntax Of Word Wrap In Css3?
The general syntax word-wrap property of CSS3 is as follows:
word-wrap: normal| break-word
The default initial value is normal in the above syntax.

Q12. What is grouping ?
Grouping is gathering (1) into a comma separated list two or more selectors that share the same style or (2) into a semicolon separated list two or more declarations that are attached to the same selector (2).

1. The selectors LI, P with class name .first and class .footnote share the same style, e.g.:
LI {font-style: italic}
P.first {font-style: italic}
.footnote {font-style: italic}
To reduce the size of style sheets and also save some typing time they can all be grouped in one list.
LI, P.first, .footnote {font-style: italic}

2. The declarations {font-style: italic} and {color: red} can be attached to one selector, e.g.:
H2 {font-style: italic}
H2 {color: red}
and can also be grouped into one list:
H2 {font-style: italic; color: red}

Q13. What according to you makes CSS a productive tool? What according to you are the limitations/drawbacks of this tool?
Here, the employer wants to know the level of your familiarity with CSS. Answer this question by highlighting the advantages of CSS over other similar tools. When speaking about the drawbacks/limitations of this tool, you can also suggest changes that will make this tool better to impress the interviewer.

Q14. How Do You Manage The Complete Site In Center Of The Browser, Which Is Completely Using Divs Using The Help Of Css2 Or Css3?
In CSS file
1. body{width:100%;}
2. Create a div tag and assign a class, say ‘container’ and place all your content in this div tag.
3. Assign properties to this class in CSS file
container{width:777px; margin:auto;}

Q15. If background and color should always be set together, why do they exist as separate properties? 
There are several reasons for this. First, style sheets become more legible — both for humans and machines. The background property is already the most complex property in CSS1 and combining it with color would make it even more complex. Second, color inherits, but background doesn’t and this would be a source of confusion.

Q16. How do I center block-elements with CSS1? 
There are two ways of centering block level elements:
1. By setting the properties margin-left and margin-right to auto and width to some explicit value:
BODY {width: 30em; background: cyan;}
P {width: 22em; margin-left: auto; margin-right: auto}

In this case, the left and right margins will each be four ems wide, since they equally split up the eight ems left over from (30em – 22em). Note that it was not necessary to set an explicit width for the BODY element; it was done here to keep the math clean.

Another example:
TABLE {margin-left: auto; margin-right: auto; width: 400px;}
In most legacy browsers, a table’s width is by default determined by its content. In CSS-conformant browsers, the complete width of any element (including tables) defaults to the full width of its parent element’s content area. As browser become more conformant, authors will need to be aware of the potential impact on their designs.

Q17. How Is Multi-column Feature Used In Css3?
By using the Multi-Column feature of CSS3 the web designers can get their output in multiple columns with definitions defined for each column like column-width, column-count.

[_private/tble_firefox.htm]
CSS
P.name1 {color: red} /* one class of P selector */
P.name2 {color: blue} /* another class of P selector */
.name3 {color: green} /* can be attached to any element */
HTML
<P class=name1>This paragraph will be red</P>
<P class=name2>This paragraph will be blue</P>
<P class=name3>This paragraph will be green</P>
<LI class=name3>This list item will be green</LI>

It is a good practice to name classes according to their function than their appearance; e.g. P.fotnote and not P.green. In CSS1 only one class can be attached to a selector. CSS2 allows attaching more classes, e.g.:
P.name1.name2.name3 {declaration} <P class=”name1 name2 name2″>This paragraph has three classes attached</P>