CSS Interview question and answers
ANS: CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. Every element type as well as every occurrence of a specific element within that type can be declared an unique style, e.g. margins, positioning, color or size.
2. What are Cascading Style Sheets?
ANS: 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.
3. What is CSS rule ‘ruleset’?
ANS: There are two types of CSS rules: ruleset and at-rule. Ruleset identifies selector or selectors and declares style which is to be attached to that selector or selectors
4. What is CSS declaration?
ANS: 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.
5. What are the types of CSS rules?
ANS: There are 3 types of CSS rules:
6. Which browsers support CSS?
ANS: The browsers that support CSS are:
* Internet Explorer 3.0 and above
* Navigator 4.0 and above
* Opera 3.6 and above
* XPublish by Media Design in•Progress
7. What is grouping?
ANS: Grouping is gathering into a comma separated list two or more selectors that share the same style or into a semicolon separated list two or more declarations that are attached to the same
8. Is CSS case sensitive?
ANS: Cascading Style Sheets (CSS) is not case sensitive. However, font families, URLs to images, and other direct references with the style sheet may be.
The trick is that if you write a document using an XML declaration and an XHTML doctype, then the CSS class names will be case sensitive for some browsers.
9. What are the five possible values for “position”?
ANS: Values for position: static, relative, absolute, fixed, inherit.
10. What is the default/initial value for “position”?
11. How does the browser determine where to place positioned elements?
ANS: They are placed relative to the next parent element that has absolute or relative value declared.
12. What is embedded style? How to link?
ANS: 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.
13. What are the pros and cons of using absolute positioning?
ANS: Absolutely positioned elements are removed from the document flow. The positioned element does not flow around the content of other elements, nor does their content flow around the positioned element. An absolutely positioned element may overlap other elements, or be overlapped by them.
14. What is ID selector?
ANS: 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.
15. What is contextual selector?
ANS: 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.
16. What is inline style? How to link?
ANS: 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.
17. What is imported Style Sheet? How to link?
ANS: 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.
18. What is alternate Style Sheet? How to link?
ANS: Alternate Style Sheet is a sheet defining an alternate style to be used in place of style(s) declared as persistent and/or preferred .
Persistent style is a default style that applies when style sheets are enabled but can disabled in favor of an alternate style,
19. How to use CSS to separate content and design ?
ANS: By using external style sheet, we can easily separate the content from its design.
20. Can CSS be used with other than HTML documents?
ANS: Yes. CSS can be used with any ny structured document format. e.g. XML, however, the method of linking CSS with other document types has not been decided yet.
21. What are pseudo-classes?
ANS: Pseudo-classes are fictional element types that do not exist in HTML. In CSS1 there is only one element type which can be classed this way, namely the A element (anchor). By creating three fictional types of the A element individual style can be attached to each class. These three fictional element types are: A as unvisited link, A as active link and A as visited link. Pseudo-classes are created by a colon followed by pseudo-class’s name. They can also be combined with normal classes
22. What Is a Floating Element in CSS?
A floating element is a block element or in-line element being specified with the “float” style property. If “float: left” is specified, a floating element will be formatted at the left margin of the parent element. The current block and sub sequent blocks will be floated on the right side of this floating element. If “float: right” is specified, a floating element will be formatted at the left margin of the parent element. The current block and sub sequent blocks will be floated on the right side of this floating element.
23. What Is CSS Cascading?
ANS: CSS cascading is another rule that allows multiple definitions on the same style property of the same HTML tag instance. The Web browser will use cascading order rules to determine the winning definition.