CSS Interview questionsand answers
1. What is CSS?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 occurance 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?
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. How do I center block-elements with CSS1?
There are ways of centering block level elements:
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.
4.If background and color should always be set together, why do they exist as separate properties?
There are serveral 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.
5. 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.
6. What is grouping?
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 selector .
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}
7. What is external Style Sheet? How to link?
External Style Sheet is a template/document/file containing style information which can be linked with any number of HTML documents. This is a very convenient way of formatting the entire site as well as restyling it by editing just one file. The file is linked with HTML documents via the LINK element inside the HEAD element. Files containing style information must have extension .css, e.g. style.c ss.
<LINK rel=stylesheet type=”text/css” href=”style.css“>
8. Is CSS case sensitive?
Cascading Style Sheets (CSS) is not case sensitve. However, font families, URLs to images, and other direct references with the style sheet may be.
9. What is CSS rule ‘ruleset’?
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. For example P {text-indent: 10pt} is a CSS rule. CSS rulesets consist of two parts: selector [ e.g. P ] and declaration [ e.g. {text-indent: 10pt}] .
P {text-indent: 10pt} – CSS rule (ruleset)
{text-indent: 10pt} – CSS declaration
text-indent – CSS property
10pt – CSS value
10. ‘Fixed’ Background?
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 ..
11. What is embedded style? How to link?
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.
12. What is ID selector?
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
13. What is contextual selector?
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.
14. How do I have a background image that isn’t tiled?
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;}
15. What does \ABCD (and \ABCDE) mean?
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:
.41B41F {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:
.41B941F {font-style: italic;}
16. What are the advantages/disadvantages of the various style methods?
External Style Sheets
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
17. What is inline style? How to link?
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 occurance.
18. What is imported Style Sheet? How to link?
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.
.
19. What is alternate Style Sheet? How to link?
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, e.g.:
Preferred style is a default style that applies automatically and is declared by setting the TITLE attribute to the LINK element. There can only be one preferred style, e.g.:
Alternate style gives an user the choice of selecting an alternative style – a very convenient way of specifying a media dependent style. Note: Each group of alternate styles must have unique TITLE, e.g.:
< LINK REL=”Alternate Stylesheet” HREF=”style4.css” TYPE=”text/css” TITLE=”appropriate style description” MEDIA=print>
20. How can you set a minimum width for IE?
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…
body {
width:expression(documentElement.clientWidth < 780 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 780 ? “780px” : “auto”) : “780px”) : “auto” );
}
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.
21. How do I place text over an image?
To place text or image over an image you use the position property. The below exemple is supported by IE 4.0. All you have to do is adapt the units to your need.
“
< /div>
< div style=”position: absolute; top: 20%; left: 20%; width: 200px”>
Text that nicely wraps
< /div>
< /div> ”
22. What is attribute selector?
Attribute selector is a selector defined by 1) the attribute set to element(s), 2) the attribute and value(s), 3) the attribute and value parts:
1a) A[title] {text-decoration: underline}
All A elements containing the TITLE attribute will be underlined
1b) A[class=name] {text-decoration: underline}
The A elements classed as ‘name’ will be underlined
2) A[title="attribute element"] {text-decoration: underline}
The A elements containing the TITLE attribute with a value that is an exact match of the specified value, which in this example is ‘attribute element’, will be underlined
3) A[title~="attribute"] {text-decoration: underline}
The A elements containing the TITLE attribute with a value containing the specified word, which in this example is ‘attribute’, will be underlined
23. What is parent-child selector?
Parent-child selector is a selector representing the direct descendent of a parent element. Parent-child selectors are created by listing two or more tilde (~) separated selectors.
“BODY ~ P {background: red; color: white}
The P element will be declared the specified style only if it directly descends from the BODY element:
< BODY> Red and white paragraph
The EM element will be declared the specified style only if it directly descends from the P element which in its turn directly descends from the BODY element:
Red and white EM
”24. What are inline, block, parent, children, replaced and floating elements?
Inline elements
which do not have line breaks. Can occur in block elements or other inline elements, cannot contain block elements.
Inline elements in HTML 3.2; EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, TT, I, B, U, STRIKE, BIG, SMALL, SUB, SUP, A, IMG, APPLET, FONT, BASEFONT, BR, SCRIPT, MAP, INPUT, SELECT, TEXTAREA.
Inline elements in HTML 4.0; EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM, TT, I, B, BIG, SMALL, SUB, SUP, A, IMG, OBJECT, BR, SCRIPT, MAP, Q, SPAN, BDO, INPUT, SELECT, TEXTAREA, LABEL, BUTTON, (INS, DEL).
Inline elements in HTML 4.0 Transitional; EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM, TT, I, B, U, S, STRIKE, BIG, SMALL, SUB, SUP, A, IMG, APPLET, OBJECT, FONT, BASEFONT, BR, SCRIPT, MAP, Q, SPAN, BDO, IFRAME, INPUT, SELECT, TEXTAREA, LABEL, BUTTON, (INS, DEL).
Block elements
which do have line breaks. May occur in other block elements, cannot occur in inline elements, may contain both block and inline elements.
Block elements in HTML 3.2; H1, H2, H3, H4, H5, H6, ADDRESS, P, DL, DT, DD, UL, OL, DIR, MENU, LI, DIV, CENTER, BLOCKQUOTE, PRE, HR, ISINDEX, TABLE, FORM.
Block elements in HTML 4.0; P, H1, H2, H3, H4, H5, H6, UL, OL, PRE, DL, DIV, NOSCRIPT, BLOCKQUOTE, FORM, HR, TABLE, FIELDSET, ADDRESS, (INS, DEL).
Block elements in HTML 4.0 Transitional; P, H1, H2, H3, H4, H5, H6, UL, OL, DIR, MENU, PRE, DL, DIV, CENTER, NOSCRIPT, NOFRAMES, BLOCKQUOTE, FORM, ISINDEX, HR, TABLE, FIELDSET, ADDRESS, (INS, DEL).
Parents and children elements
which either contain (parents) or are in the content of (children) other elements, e.g.
“ e.g. texttexttext
.” P is a parent of STRONG. STRONG is a child of P. If not specified otherwise, children will inherit parent’s properties.
Replaced
elements which content is replaced. For example content of the IMG element is replaced with an image, content of the INPUT element is replace with a field.
Floating
elements which follow the flow of a parent – inline elements.
25. What are pseudo-classes?
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, e.g.:
A:link {background: black; color: white}
A:active {background: black; color: red}
A:visited {background: transparent; color: black}
This anchor (or rather these anchors) will be displayed as declared above
A.foot:link {background: black; color: white}
A.foft:active {background; black: color: red}
A.foot:visited {background: transparent; color: black}
This anchor and all other anchors with CLASS foot will be displayed as declared above
26. What is CSS rule ‘at-rule’?
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.
27. What is ‘important’ declaration?
Important declaration is a declaration with increased weight. Declaration with increased weight will override declarations with normal weight. If both reader’s and author’s style sheet contain statements with important declarations the author’s declaration will override the reader’s.
BODY {background: white ! important; color: black}
In the example above the background property has increased weight while the color property has normal.
27 To what are partial URLs relative?
Partial URLs are relative to the source of the style sheet. The style sheet source can either be linked or embedded. To which source partial URLs are relative to depends on their occurrence.
If a partial URL occurs in a linked style sheet then it is relative to the linked style sheet. The URL of the linked style sheet is the URL of the directory where the sheet is kept.
If a partial URL occurs in an embedded style sheet then it is relative to the embedded style sheet. The URL of the embedded style sheet is the URL of the HTML document in which the sheet is embedded.
Note that Navigator 4.x treats partial URLs as being relative to the HTML document, regardless of the place where the partial URL occurs. This is a serious bug which forces most authors to use absolute URLs in their CSS.
28 What is the difference between ID and CLASS?
ID identifies and sets style to one and only one occurrence of an element while class can be attached to any number of elements. By singling out one occurrence of an element the unique value can be declared to said element.
CSS
#eva1 {background: red; color: white}
.eva2 {background: red; color: white}
“HTML – ID
Paragraph 1 – ONLY THIS occurrence of the element P (or single occurrence of some other element) can be identified as eva1
< P ID=eva1>Paragraph 2 – This occurrence of the element P CANNOT be identified as eva1
HTML – CLASS
< P class=eva2>Paragraph 1 – This occurrence of the element P can be classified as eva2
< P class=eva2>Paragraph 2 – And so can this, as well as occurrences of any other element, ”29. What is shorthand property?
Shorthand property is a property made up of individual properties that have a common “addressee”. For example properties: font-weight, font-style, font-variant, font-size, font-family, refer to the font. To reduce the size of style sheets and also save some keystrokes as well as bandwidth they can all be specified as one shorthand property font, e.g.:
H1 {font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 160%;
font-family: serif}
can be all shorthanded to a space separated list:
H1 {font: bold italic small-caps 160% serif}
Note: To make things even simpler the line-height property can be specified together with the font-size property:
H1 {font: bold italic small-caps 160%/170% serif}
30. How does inheritance work?
HTML documents are structured hierarchically. There is an ancestor, the top level element, the HTML element, from which all other elements (children) are descended. As in any other family also children of the HTML family can inherit their parents, e.g. color or size.
By letting the children inherit their parents a default style can be created for top level elements and their children. (Note: not all properties can be inherited). The inheritance starts at the oldest ancestor and is passed on to its children and then their children and the children’s children and so on.
Inherited style can be overridden by declaring specific style to child element. For example if the EM element is not to inherit its parent P then own style must be declared to it. For example:
BODY {font-size: 10pt}
All text will be displayed in a 10 point font
BODY {font-size: 10pt}
H1 {font-size: 14pt} or H1 {font-size: 180%}
All text except for the level 1 headings will be displayed in a 10 point font. H1 will be displayed in a 14 point font (or in a font that is 80% larger than the one set to BODY). If the element H1 contains other elements, e.g. EM then the EM element will also be displayed in a 14 point font (or 180%) it will inherit the property of the parent H1. If the EM element is to be displayed in some other font then own font properties must be declared to it, e.g:
BODY {font-size: 10pt}
H1 {font-size: 14pt} or H1 {font-size: 180%}
EM {font-size: 15pt} or EM {font-size: 110%}
The EM element will be displayed in a 15 point font or will be 10% larger than H1. NOTE: EM is, in this example, inside H1 therefore will inherit H1′s properties and not BODY’s.
The above declaration will display all EM elements in 15 point font or font that is 10% larger than font declared to the parent element. If this specific font is to apply to EM elements but only if they are inside H1 and not every occurrence of EM then EM must take a form of a contextual selector.
H1 EM {font-size: 15pt} or H1 EM {font-size: 110%}
In the example above EM is a contextual selector. It will be displayed in specified font only if it will be found in the context of H1.
Not all properties are inherited. One such property is background. However, since it’s initial value is transparent the background of the parent element will shine through by default unless it is explicitly set.
31. What is Extensible Stylesheet Language (XSL)?
XSL is a proposed styling language for formatting XML (eXtensible Markup Language) documents. The proposal was submitted to the W3C by Microsoft, Inso, and ArborText.
32. How do you make a tooltip that appears on hover?
The most simple way is to use the ‘title’ attribute like this…
“HTML
like this
CSS
a.tooltip {
position:relative;
cursor:help;
}
a.tooltip span {
display:none;
position:absolute;
top:1.5em;
left:0;
width:15em;
padding:0 2px;
}
a.tooltip:hover {
display:inline;
}
a.tooltip:hover span {
display:block;
border:1px solid gray;
background-color:white;
}
HTML
Karl Marx-info goes here-
Without this part… a.tooltip:hover {
display:inline;
}
..it won’t work in IE.
The “#n” in the link is to prevent the page from jumping to the top if the link is clicked. The “href” part is necessary as it won’t work in IE without it.”
var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
document.write(unescape(“%3Cscript src=’” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));
try {
var pageTracker = _gat._getTracker(“UA-1855756-5″);
pageTracker._trackPageview();
} catch(err) {}
