CSS Interview Questions and 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
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 : - What is embedded style? How to link?
Answer - 12 : - Embedded style is the style attached to one specific document. The style information is specified as a content of the STYLE element inside the HEAD element and will apply to the entire document.
Note: The styling rules are written as a HTML comment, that is, between to hide the content in browsers without CSS support which would otherwise be displayed.
Question - 13 : - What is ID selector?
Answer - 13 : - ID selector is an individually identified (named) selector to which a specific style is declared. Using the ID attribute the declared style can then be associated with one and only one HTML element per document as to differentiate it from all other elements. ID selectors are created by a character # followed by the selector's 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.
#abc123 {color: red; background: black}
This and only this element can be identified as abc123
Question - 14 : - What is contextual selector?
Answer - 14 : - 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 - 15 : - How do I have a background image that isn't tiled?
Answer - 15 : - Specify the background-repeat property as no-repeat. You can also use the background property as a shortcut for specifying multiple background-* properties at once. Here's an example:
BODY {background: #FFF url(watermark.jpg) no-repeat;}
Question - 16 : - What does \ABCD (and \ABCDE) mean?
Answer - 16 : - CSS allows Unicode characters to be entered by number. For example, if a CLASS value in some Russian document contains Cyrillic letters EL PE (Unicode numbers 041B and 041F) and you want to write a style rule for that class, you can put that letter into the style sheet by writing:
.\041B\041F {font-style: italic;}
This works on all keyboards, so you don't need a Cyrillic keyboard to write CLASS names in Russian or another language that uses that script.
The digits and letters after the backslash (\) are a hexadecimal number. Hexadecimal numbers are made from ordinary digits and the letters A to F (or a to f). Unicode numbers consist of four such digits.
If the number starts with a 0, you may omit it. The above could also be written as:
.\41B\41F {font-style: italic;}
But be careful if the next letter after the three digits is also a digit or a letter a to f! This is OK: .\41B-\41F, since the dash (-) cannot be mistaken for a hexadecimal digit, but .\41B9\41F is only two letters, not three.
Four digits is the maximum, however, so if you write:
.\041B9\041F {font-style: italic;}
Question - 17 : - Why do style sheets exist?
Answer - 17 : - SGML (of which HTML is a derivative) was meant to be a device-independent method for conveying a document's structural and semantic content (its meaning.) It was never meant to convey physical formatting information. HTML has crossed this line and now contains many elements and attributes which specify visual style and formatting information. One of the main reasons for style sheets is to stop the creation of new HTML physical formatting constructs and once again separate style information from document content.
Question - 18 : - What are the advantages/disadvantages of the various style methods?
Answer - 18 : - Advantages
* Can control styles for multiple documents at once
* Classes can be created for use on multiple HTML element types in many documents
* Selector and grouping methods can be used to apply styles under complex contexts
Disadvantages
* An extra download is required to import style information for each document
* The rendering of the document may be delayed until the external style sheet is loaded
* Becomes slightly unwieldy for small quantities of style definitions
Embedded Style Sheets
Advantages
* Classes can be created for use on multiple tag types in the document
* Selector and grouping methods can be used to apply styles under complex contexts
* No additional downloads necessary to receive style information
Disadvantages
* This method can not control styles for multiple documents at once
Inline Styles
Advantages
* Useful for small quantities of style definitions
* Can override other style specification methods at the local level so only exceptions need to be listed in conjunction with other style methods
Disadvantages
* Does not distance style information from content (a main goal of SGML/HTML)
* Can not control styles for multiple documents at once
* Author can not create or control classes of elements to control multiple element types within the document
* Selector grouping methods can not be used to create complex element addressing scenarios
Question - 19 : - What is inline style? How to link?
Answer - 19 : - Inline style is the style attached to one specific element. The style is specified directly in the start tag as a value of the STYLE attribute and will apply exclusively to this specific element occurrence.
Indented paragraph
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.