• +91 9971497814
  • info@interviewmaterial.com

Computer Interview Questions Answers

CSS Interview Questions Answers

Question - 11 : - 'Fixed' Background?

Answer - 11 : - There is the possibility to use the HTML tag bgproperties="fixed", but that is IE proprietary, and dependent upon the 'background' attribute (deprecated in HTML4). With CSS, you can declare the background like: BODY { font-family : "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; background-image: url(images/yourimage.gif); background-repeat: no-repeat; /*no-tiling background*/ background-position: center; background-attachment: fixed; background-color: #hexcolor; color : #hexcolor; margin: 10px; } that shows a background-image in the center of the <BODY> element, non-scrolling and non-repeating - in IE or NN6. NN 4.xx gets the non-repeat-part right, but stuffs the picture in the upper left corner and scrolls ...

Question - 12 : - How do I have a fixed (non-scrolling) background image?

Answer - 12 : - With CSS, you can use the background-attachment property. The background attachment can be included in the shorthand background property, as in this example: body { background: white url(example.gif) fixed ; color: black ; } Note that this CSS is supported by Internet Explorer, Mozilla, Firefox Opera, Safari, and other browsers. In contrast, Microsoft's proprietary BGPROPERTIES attribute is supported only by Internet Explorer.

Question - 13 : - How can you set a minimum width for IE?

Answer - 13 : - To set a minimum width, the CSS property is 'min-width'. This can be very useful and works well in good browsers. IE doesn't understand 'min-width'. However, it has a proprietary property called 'expression' which allows us to feed it javascript via a stylesheet. Below is how to set a (780px) minimum width for IE... <!--[if gte IE 5]> <style type="text/css"> body { width:expression(documentElement.clientWidth < 780 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 780 ? "780px" : "auto") : "780px") : "auto" ); } </style> <![endif]--> As the property is non-standard, it won't validate with the W3C validator, so if we put it in the head like this (above) - in an IE conditional comment - the validator will ignore it and the page will get a clean bill of health.

Question - 14 : - Why are there gaps above and below my form in IE?

Answer - 14 : - A lot of the time, when you find gaps that you can't account for, they are due the default styles of different browsers - especially the margins and padding. IE gives forms some margins above and below forms while Firefox doesn't. It's like with lists - you'll find bigger padding and margins for lists in IE than in Firefox. Paragraph margins are different, as are the margins on heading tags (h1,h2, etc). A good way to not get caught out by these problems is to set all margins and padding to zero at the top of your style sheet and then add them as and when you feel the a need for them, in that way, any margins and padding will be the same in different browsers. CSS * { margin:0; padding:0; } If one were to set Text and Link colors using a style sheet, should one also define the background colors for these elements as well? It is generally true that you should give background or background-color a value, but not necessarily a color value. E.g., if the document has a background image, you would "highlight" all links if you give them a background color. body { background-image: url(light-texture.png) #FFF; color: #000 } a:link, a:visited, a:active { color: #00F; background-color: transparent; } By setting the background-image explicitly to transparent, you lower the risk of another rule in the cascade giving links a background that would highlight them.

Question - 15 : - How do I quote font names in quoted values of the style attribute?

Answer - 15 : - The attribute values can contain both single quotes and double quotes as long as they come in matching pairs. If two pair of quotes are required include single quotes in double ones or vice versa: <P STYLE="font-family: 'New Times Roman'; font-size: 90%"> <P STYLE='font-family: "New Times Roman"; font-size: 90%'> It's been reported the latter method doesn't work very well in some browsers, therefore the first one should be used.

Question - 16 : - What is CSS rule 'at-rule'?

Answer - 16 : - There are two types of CSS rules: ruleset and at-rule. At-rule is a rule that applies to the whole style sheet and not to a specific selector only (like in ruleset). They all begin with the @ symbol followed by a keyword made up of letters a-z, A-Z, digits 0-9, dashes and escaped characters, e.g. @import or @font-face.

Question - 17 : - What is contextual selector?

Answer - 17 : - Contextual selector is a selector that addresses specific occurrence of an element. It is a string of individual selectors separated by white space, a search pattern, where only the last element in the pattern is addressed providing it matches the specified context. TD P CODE {color: red} The element CODE will be displayed in red but only if it occurs in the context of the element P which must occur in the context of the element TD. TD P CODE, H1 EM {color: red} The element CODE will be displayed in red as described above AND the element EM will also be red but only if it occurs in the context of H1 P .footnote {color: red} Any element with CLASS footnote will be red but only if it occurs in the context of P P .footnote [lang]{color: red} Any element with attribute LANG will be red but only if it is classed as "footnote" and occurs in the context of P

Question - 18 : - What is CSS declaration?

Answer - 18 : - CSS declaration is style attached to a specific selector. It consists of two parts; property which is equivalent of HTML attribute, e.g. text-indent: and value which is equivalent of HTML value, e.g. 10pt. NOTE: properties are always ended with a colon.

Question - 19 : - What is selector?

Answer - 19 : - CSS selector is equivalent of HTML element(s). It is a string identifying to which element(s) the corresponding declaration(s) will apply and as such the link between the HTML document and the style sheet. For example in P {text-indent: 10pt} the selector is P and is called type selector as it matches all instances of this element type in the document. in P, UL {text-indent: 10pt} the selector is P and UL (see grouping); in .class {text-indent: 10pt} the selector is .class (see class selector).

Question - 20 : - What is imported Style Sheet? How to link?

Answer - 20 : - Imported Style Sheet is a sheet that can be imported to (combined with) another sheet. This allows creating one main sheet containing declarations that apply to the whole site and partial sheets containing declarations that apply to specific elements (or documents) that may require additional styling. By importing partial sheets to the main sheet a number of sources can be combined into one. To import a style sheet or style sheets include the @import notation or notations in the STYLE element. The @import notations must come before any other declaration. If more than one sheet is imported they will cascade in order they are imported - the last imported sheet will override the next last; the next last will override the second last, and so on. If the imported style is in conflict with the rules declared in the main sheet then it will be overridden. <LINK REL=STYLESHEET HREF="main.css" TYPE="text/css"> <STYLE TYPE="text=css"> <!-- @import url(http://www.and.so.on.partial1.css); @import url(http://www.and.so.on.partial2.css); .... other statements --> </STYLE>

Computer Contributors

Rajeev Katiyar
Yes Baroda

Share your email for latest updates


Our partners