CSS Interview Questions and Answers
Q1. What are Cascading Style Sheets?
Ans: A Cascading Style Sheet (CSS) is a list of statements (additionally known as guidelines) which could assign numerous rendering homes to HTML factors. Style rules can be exact for a unmarried detail prevalence, a couple of factors, an entire report, or maybe multiple files right now. It is viable to specify many one-of-a-kind guidelines for an detail in different places the usage of extraordinary techniques. All these regulations are gathered and merged (called a "cascading" of styles) while the record is rendered to shape a unmarried fashion rule for every element.
Q2. Is CSS case touchy?
Ans: CSS is not case sensitive. However, attributes associated at the side of the CSS command which include font households, URLs, or other factors can be case touchy.
Q3. What Is Wrapping In Css3?
Ans: Wrapping is a vital assets for correct show of contents in web pages. If wrapping is disabled then the consumer could not show and consider lengthy traces that is going outside the window boundary and for that reason turns into useless.
Q4. What is a CSS clear out?
Ans: CSS filter out is by using far one of the maximum advantageous feature of this language. It permits the coders to write down a totally distinctive code or make changes to the existing layout styles that in addition permit the internet browsers to receive the CSS coding specifications that they assist, thereby disabling any times of changes that the browser might also make to the code.
Q5. What is elegance?
Ans: Class is a group of one) instances of the identical detail to which an specific fashion may be connected or 2) instances of various elements to which the identical fashion can be connected.
1. The rule P coloration: red will display red textual content in all paragraphs. By classifying the selector P different fashion can be connected to every class permitting the display of a few paragraphs in one fashion and a few different paragraphs in every other style.
2. A magnificence also can be designated without associating a specific detail to it and then attached to any detail that's to be styled in accordance with it is announcement. All factors to which a specific elegance is attached could have the same style.
To classify an detail add a period to the selector observed through an specific call. The name can comprise characters a-z, A-Z, digits zero-9, period, hyphen, escaped characters, Unicode characters 161-255, in addition to any Unicode person as a numeric code, but, they can't begin with a sprint or a digit. (Note: in HTML the price of the CLASS attribute can incorporate extra characters). (Note: textual content between /* and */ are my remarks).
Q6. Which browsers aid CSS?
Ans: It depends for your definition of "support." If you are interested in the ones browsers which makes a few strive at helping CSS, irrespective of how partial or computer virus-ridden, then the list is:
Internet Explorer three.0 and above
Navigator four.Zero and above
Opera three.6 and above
Konqueror
Arena
Emacs-w3
Amaya
Lexicon
XPublish by using Media Design in•Progress
If instead you're interested in those browsers which can be recognised to do a credible activity of worm-free and primarily completel aid for CSS1, then the listing narrows extremely dramatically:
Internet Explorer five.Zero for Macintosh and above
Internet Exporer five.Five for Windows and above
Netscape Navigator 6.Zero and above
Opera four.Zero and above
While none of those browser may be claimed to have a really perfect implementation of CSS1, they're all quite top and may be relied upon to operate in a constant style for most of CSS1.
Q7. What Is The Syntax Of Opacity In Css3?
Ans: fashion="opacity:0.Four;filter:alpha(opacity=40)"
Firefox uses the property opacity:x for transparency, while IE uses filter:alpha (opacity=x).
Q8. What are guidelines?
Ans: Rules are the set of selectors along side a announcement block. A assertion block is a listing of declarations.
Q9. How many values a ?Position? attribute gives?
Ans: A position attribute offers the following values:
Absolute
Relative
Static
Fixed
Inherit
Relative price is the default fee.
Q10. What are vertical manage limitations?
Ans: The obstacles faced at some stage in the vertical placement of objects in CSS are known as vertical control boundaries.
Q11. What Is The Syntax Of Word Wrap In Css3?
Ans: The wellknown syntax word-wrap belongings of CSS3 is as follows:
word-wrap: everydaywreck-phrase
The default preliminary price is regular in the above syntax.
Q12. What is grouping?
Ans: Grouping is amassing (1) into a comma separated list two or greater selectors that share the identical fashion or (2) right into a semicolon separated list two or more declarations that are connected to the identical selector (2).
1. The selectors LI, P with class name .First and sophistication .Footnote proportion the identical fashion, e.G.:
LI font-fashion: italic
P.First font-fashion: italic
.Footnote font-fashion: italic
To reduce the size of style sheets and additionally store some typing time they are able to all be grouped in one listing.
LI, P.First, .Footnote font-fashion: italic
2. The declarations font-fashion: italic and color: pink may be connected to one selector, e.G.:
H2 font-style: italic
H2 colour: crimson
and can also be grouped into one list:
H2 font-fashion: italic; coloration: pink
Q13. What consistent with you makes CSS a productive tool? What in line with you are the limitations/drawbacks of this device?
Ans: Here, the employer desires to understand the level of your familiarity with CSS. Answer this question with the aid of highlighting the blessings of CSS over different comparable equipment. When talking approximately the drawbacks/limitations of this tool, you may additionally recommend adjustments so one can make this device higher 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?
Ans: In CSS record:
framewidth:a hundred%;
Create a div tag and assign a class, say 'container' and location all your content material on this div tag.
Assign residences to this class in CSS document
boxwidth:777px; margin:car;
Q15. If heritage and colour ought to usually be set together, why do they exist as separate houses?
Ans: There are several reasons for this. First, fashion sheets emerge as greater legible -- each for humans and machines. The background belongings is already the most complex property in CSS1 and combining it with coloration might make it even greater complex. Second, coloration inherits, but history doesn't and this will be a supply of confusion.
Q16. How do I middle block-elements with CSS1?
Ans: There are two methods of centering block stage elements:
By putting the houses margin-left and margin-right to auto and width to a few explicit fee:
BODY width: 30em; heritage: cyan;
P width: 22em; margin-left: car; margin-right: auto In this example, the left and proper margins will each be four ems extensive, since they similarly split up the eight ems left over from (30em - 22em). Note that it became not vital to set an express width for the BODY detail; it changed into accomplished here to preserve the mathematics clean.
Another example:
TABLE margin-left: auto; margin-right: car; width: 400px; In maximum legacy browsers, a table's width is by default decided with the aid of its content material. In CSS-conformant browsers, the entire width of any element (such as tables) defaults to the entire width of its parent detail's content area. As browser emerge as extra conformant, authors will want to be aware about the capacity impact on their designs.
Q17. How Is Multi-column Feature Used In Css3?
Ans: By the use of the Multi-Column feature of CSS3 the net designers can get their output in multiple columns with definitions described for each column like column-width, column-depend.
[_private/tble_firefox.Htm]
CSS
P.Name1 color: red /* one class of P selector */
P.Name2 colour: blue /* some other elegance of P selector */
.Name3 colour: inexperienced /* can be connected to any detail */
HTML
<P class=name1>This paragraph can 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 might be green</LI>
It is a great exercise to call lessons consistent with their function than their look; e.G. P.Fotnote and now not P.Green. In CSS1 simplest one class can be connected to a selector. CSS2 permits attaching more classes, e.G.:
P.Name1.Name2.Name3 announcement <P class="name1 name2 name2">This paragraph has three training attached</P>
