S stands for cascading style sheet used to define the presentation of a webpage written in HTML or XHTML. It can be used in XML, SGV. CSS is developed by W3C.
CSS is primarily developed to separate the HTML document content to presentation document. All style of a webpage is placed in a single .css file, this helps to edit the presentation content easily. For developing a webpage it is mandatory to have knowledge about CSS. Give below is a list of interview questions.
CSS interview questions and answers for freshers
(Q) How many types we can write the css style sheets?
(A) There are three types we can write style sheets.
Inline style sheet
Internal style sheet
External style sheet
(Q) What is Css Hack Code for ie8, ie7?
(A) Css hack code for ie8 is \9
Ex: .class{ padding-top:10px\9;} – It effects only in ie8 browser
Css hack code for ie7 is *+html
Ex: *+html .class{ padding-top:10px;} – It effects only in ie8 browser
(Q) How can we write margin and padding format in css code?
(A) Margin : top right bottom left
Padding : top right bottom left
(Q) How many types of CSS rules and what are they?
(A) 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
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.
(Q) What is shorthand property?
(A) 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 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}
(Q) Can I attach more than one declaration to a selector?
(A) Yes. If more than one declaration is attached to a selector they must appear in a semi colon separated list, e.g.;
Selector {declaration1; declaration2}
P {background: white; color: black}
(Q) What is cascade?
(A) Cascade is a method of defining the weight (importance) of individual styling rules thus allowing conflicting rules to be sorted out should such rules apply to the same selector.
Declarations with increased weight take precedence over declaration with normal weight:
P {color: white ! important} /* increased weight */
P (color: black} /* normal weight */
(Q) What is the difference between css2 and css3?
(A) The biggest difference between CSS2 and CSS3 is that CSS3 has been split up into different sections, called modules. Each of these modules is making it’s way through the W3C in various stages of the recommendation process.
(Q) What is Embedded Style?
(A) Embedded Style Sheets are preset within the web page. This is very useful in making the collection of all the styles applied to the page and making them appear in a common place under the element or tag which is placed in the page header.
An embded style which can be written with in the head tag see below
<html>
<head>
<style type= “text/css”>
embded style goes here
body elements
</body</html>
(Q) What are the issues encountered with IE z-index?
(A) z-index is used to show the order of the object
(Q) What is the default margin and padding of h1,h2,h3,h4,h5,h6?
(A) heading 1 (h1)
margin-left: 0px margin-right: 0px; margin-top: 8px; margin-bottom: 8px;
heading 2 (h2)
margin-left: 0px margin-right: 0px; margin-top: 10px; margin-bottom: 10px;
heading 3 (h3)
margin-left: 0px margin-right: 0px; margin-top: 12px; margin-bottom: 12px;
heading 4 (h4)
margin-left: 0px margin-right: 0px; margin-top: 16px; margin-bottom: 16px;
heading 5 (h5)
margin-left: 0px margin-right: 0px; margin-top: 20px; margin-bottom: 20px;
heading 6 (h6)
margin-left: 0px margin-right: 0px; margin-top: 28px; margin-bottom: 28px;
(Q) What are the rules to be followed for CSS-names?
(A) 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.
(Q) How do you display hyperlinks without underlines?
(A) A:link { text-decoration: none } —– for normal, unvisited links, no underline;
A:active { text-decoration: none } — active is for link appearance while you’re clicking
A:visited { text-decoration: none } — visited is for previously visited links
(Q) What is syntax for Grouping in CSS?
(A) For example One can use grouping syntax as below:
H1 { font: bold 10pt/16pt helvetica }
In the above the properties font-weight, font-size, font-family are combined by using grouping syntax.
(Q) What is floating elements in CSS?
(A) The question is not entirely correct in its sense. There are HTML elements which you can float with the help of CSS e.g. a DIV element or text/image inside an HTML element. You can use float:[left | right]; property to float HTML elements inside its own container (i.e. its parent element).
(Q) What is the use of Contexual Selector?
(A) Contextual selects are merely strings of two or more selectors seperated by white space. These selectors can be assigned normal properties ,and due to the rules of cascading order, they will take precedence over simple selectors. For example , the contextual selectors in
p em {background: blue} is p em.
This rule says that emphasized text within a paragraph should have blue background.
(Q) How do you rate CSS types as per priority and what are the reasons liked Embedded, External and Inline? Which one gets top priority and why?
(A) Choosing between External, Embedded and Inline CSS is critical. It is always advisable to think long term. Even when you are working on a smaller module, you never know its future. Moreover, one must remember that CSS is all about ‘look and feel’ (style) while HTML is content; so better keep they separate.
As far as possible, avoid Inline styles. If you are very sure that particular CSS classes are relevant only to the current web page, it might be a good idea to opt for Embedded under certain circumstances. And of course, there are no cons while considering External stylesheet.
One thing is very important while using External stylesheets is the nomenclature. There are no fixed set of rules to follow but if you consider a broader view, you can easily work out a fair plan for CSS class names.
To start with, one can study some popular websites.
(Q) What is the first-line pseudo-element in CSS?
(A) The “first-line” pseudo-element is used to add special styles to the first line of the text in a selector:
Syntax:
selector:pseudo-element {property: value}
CSS classes can also be used with pseudo-elements:
selector.class:pseudo-element {property: value}
(Q) What is grouping in CSS?
Grouping is gathering (1) into a comma separated list two or more selectors that share the same style or (2) into a semicolon separated list two or more declarations that are attached to the same selector (2).
(Q) 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}
2. The declarations {font-style: italic} and {color: red} can be attached to one selector, e.g.:
H2 {font-style: italic}
H2 {color: red}
and can also be grouped into one list:
H2 {font-style: italic; color: red}
