Tuesday, May 22, 2012

CSS Interview Question and Answers

1. Explain in brief about the term CSS.
         A stylesheet language used to describe the presentation of a document written in a markup language. Cascading Style Sheets are a big breakthrough in Web design because they allow developers to control the style and layout of multiple Web pages all at once.
2.Can CSS be used with other than HTML documents?
         Yes. CSS can be used with any structured document format. e.g. XML, however, the method of linking CSS with other document types has not been decided yet.
3.Can Style Sheets and HTML stylistic elements be used in the same document?
         Yes. Style Sheets will be ignored in browsers without CSS-support and HTML stylistic elements used.
4.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.
5.What is selector?
         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).

6.What is CLASS selector?
         Class selector is a “stand alone” class to which a specific style is declared. Using the CLASS attribute the declared style can then be associated with any HTML element. The class selectors are created by a period followed by the class’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. (Note: in HTML the value of the CLASS attribute can contain more characters).It is a good practice to name classes according to their function than their appearance.
.footnote {font: 70%} /* class as selector */
This element is associated with the CLASS footnote
7.What is CSS declaration?
         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.
8.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.

9.What is property?
        Property is a stylistic parameter (attribute) that can be influenced through CSS, e.g. FONT or WIDTH. There must always be a corresponing value or values set to each property, e.g. font: bold or font: bold san-serif.
10.How do I eliminate the blue border around linked images?
in your CSS, you can specify the border property for linked images:
a img { border: none ; }
However, note that removing the border that indicates an image is a link makes it harder for users to distinguish quickly and easily which images on a web page are clickable.
11.What is ‘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 …
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.
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.
14.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:
.\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;}
15.← Top 10 HTML Interview Questions and Answers
Top 10 Best Fonts off All Time →
Top 10 CSS Interview Questions and Answers Edition-1

15.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

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 occurrence.

Indented paragraph
16.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.
17.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.
18.What is grouping?
         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).
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}
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}
19.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.
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
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...

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 combine multiple sheets into one?
        To combine multiple/partial style sheets into one set the TITLE attribute taking one and the same value to the LINK element. The combined style will apply as a preferred style, e.g.:






21.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
22.What are pseudo-elements?
         Pseudo-elements are fictional elements that do not exist in HTML. They address the element's sub-part (non-existent in HTML) and not the element itself. In CSS1 there are two pseudo-elements: 'first-line pseudo-element' and 'first-letter pseudo-element'. They can be attached to block-level elements (e.g. paragraphs or headings) to allow typographical styling of their sub-parts. Pseudo-element is created by a colon followed by pseudo-element's name, e.g:
P:first-line
H1:first-letter
and can be combined with normal classes; e.g:
P.initial:first-line
First-line pseudo-element allows sub-parting the element's first line and attaching specific style exclusively to this sub-part; e.g.:
P.initial:first-line {text-transform: uppercase}
The first line of this paragraph will be displayed in uppercase letters

First-letter pseudo-element allows sub-parting the element's first letter and attaching specific style exclusively to this sub-part; e.g.:
P.initial:first-letter { font-size: 200%; color: red}
The first letter of this paragraph will be displayed in red and twice as large as the remaining letters
23.How do I have links of different colours on the same page?
Recommending people to use classes in their 'a' tags like this :
CSS
a.red {
color:red;
}
a.blue {
color:blue;
}

This is a valid way to do it, but usually, this isn't what a page looks like - two links next to each other with different colours - it's usually something like a menu with one kind of link and main body text or another menu with different links. In this (normal) situation, To go higher up the cascade to style the links. Something like this :
CSS
a {
color:red;
}
#menu a {
color:blue;
}
24.What is the importance of Cascade in CSS?
        One doesn't have to declare repeating styles for the child elements. E.g. if has a font-name style set to Arial, by default all the elements in the
HTML document will inherit this property, unless defined separately.
25.What is the cascading order of a CSS style sheet?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
   1. Browser default
   2. External style sheet
   3. Internal style sheet (inside the tag)
   4. Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the tag, in an external style sheet, or in a browser (a default value).
26. How you define CSS Padding?
         Using CSS Padding we can set the spaces between the border and element.The top, right, bottom and left padding can be changed independently using separate properties
27.How you define CSS Margin?
 Using CSS Margin we can set the spaces around the elements.
28.How do I center block-elements with CSS?
   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.














70 comments:

  1. Thanks. You want to attend any quiz or free html templates. Please have a look. this site will help you lot.

    http://www.rightern.com/

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. yes css is very nice for use any html templates to manage your class to control your style for multiple document at one time.
    dot net training company in jaipur

    ReplyDelete
  4. Hi! Stumbled upon your site and wanted to drop you a line. Loved this post in particular. You're a fantastic writer. I'm working on my own Phoenix web development site, might be worth a look if you’re interested in design.
    Keep up the great work! Cheers :)

    ReplyDelete
  5. Your blog having such a worthable words. i think these interview question is faced by every programmer during interview session. css knowledge is must for every web designing candidate.

    ReplyDelete
  6. In today's stuff competitive business scenario, every small and large business firm is opting for having a web presence to promote their products and services to their online customers. Get Excellent Web Services from Srisys

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. Thanks a bunch for sharing this with all folks you actually know what you are talking about! Bookmarked. Please additionally seek advice from my website =). We could have a hyperlink trade arrangement among us
    Top Five Firefox Add-ons – You will love these

    ReplyDelete
  10. Thanks for post about question and answers of css and really will helpful for me.
    open source development company

    ReplyDelete
  11. This article is very nice & useful for me. Thank you.....
    website design India | Webzin Infotech

    ReplyDelete
  12. Nice to read this CSS interview Questions. Recently I attained interview with Cognizant Solution. The CSS questions i found at interview sharing here http://jharaphula.com/top-css3-interview-questions-with-answers

    ReplyDelete
  13. very nice article... thank you for sharing..

    ReplyDelete
  14. Really informative blog for website development !!!
    Website Design

    ReplyDelete
  15. thanks for sharing such an informative post. I am looking for these of details

    ReplyDelete
  16. This post is great. Thank you for this post. I like this kind of people who share their knowledge with others.
    Website Design and Development Company India

    ReplyDelete
  17. vTiger is an android CRM app to manage and organize your relations with the customer you are dealing with. This app is meant for upgrading your data records like a support system, projects, paper details etc. Further it helps you in your business in many ways like live chats with your customer providing you a true realistic environment so that you can flourish your business all over.

    ReplyDelete
  18. Blazing Star softech team is known for the skills, made for creativity and innovation and provides the best software solution ever.

    Software Development Company in Lucknow

    Web Development Company in Lucknow

    ReplyDelete
  19. Awesome blog nice article i like your content on web development knowledgeable, and helpful

    ReplyDelete
  20. we are also in the field of development for any kind of application like java, asp.net,php for more information please visit our site.




    Software Development Company in Lucknow

    Web Development Company in Lucknow

    Software Company in Lucknow

    ReplyDelete
  21. The information is very useful to crack the interview also i enjoyed reading. Thanks for sharing.

    Web development company in Mumbai

    ReplyDelete
  22. this is a great list of questions, must read once,
    thanks for sharing

    web design company in indore

    ReplyDelete
  23. Thanks for your ideas. You can also find the details on Affity Solutions, at the web development nagpur. The main object of the Affity Solutions is to provide quality web services and is among the few software development company in Nagpur.

    ReplyDelete
  24. Useful information. Further it helps you in your business in many ways like live chats with your customer providing you a true realistic environment so that you can flourish your business all over.
    infoeminent

    ReplyDelete
  25. great list of interview questions with answers.. please keep updating.. its really very helpful.

    Web development Company in indore

    ReplyDelete
  26. Great list of questions and answers. But still some question has been left out in your post. you have to add some responsive css question, because nowadays responsive does matter. Aprt from this,your information is very keen and new for fresher level.

    ReplyDelete
  27. It is very informative post.. Thanks for sharing

    ReplyDelete
  28. Beginners in web designing field should more focus on the basic interview questions and they know the basic ideas and definition from that.
    Website Design Company London | Web Design London

    ReplyDelete
  29. Great Post, I love to read articles that are informative and actually have good content. Thank you for sharing your experiences and I look forward to reading more.
    Ryan Levin | Ryan Levin

    ReplyDelete
  30. I have visited this site but to develope your web our site is best.for more information visit this site.

    The employees who are hired will be getting a good chance to see the Long Island Advertising Agency in action. The Long Island web design will be given an opportunity to make amends massively. Nassau County Web design agents are always trying to find solutions innovatively. The Long Island Social Media Marketing is an outstanding piece of technology.

    ReplyDelete
  31. Thanks for helping us with wonderful article posted in this blog. I love to read articles which are informative and useful.
    Website Development Indore | Web Development Company in Indore | Web Development Company Indore

    ReplyDelete
  32. Really awesome information I got from here and is very helpful for all.
    Website Design Company in Mumbai

    ReplyDelete
  33. very nice you have given best information and uses question and Answer
    Thanks my dear
    'Website Designing in India

    ReplyDelete
  34. Great post,This post is very helpful for developers. Thanks For sharing
    Web Development Services Delhi, best SEO company in Delhi

    ReplyDelete
  35. I had visited your website which was really good I continuously read your post now I am Waiting for Next one.. Web Development & Website Design Company USA

    ReplyDelete
  36. i read your blog your blog posting is very nice, it's really helpful information.... thanks for sharing.

    Responsive Website Design | Website Development | Website Design

    ReplyDelete
  37. This is really a nice blog..very informative & very interesting. Thanks for the sharing of such information. we will pass it on to our readers.

    Mobile Website Designing | Website Development | Website Design | SEO Auckland

    ReplyDelete
  38. Thanks for the sharing of such information . we will pass it on to our readers. http://claritusconsulting.com

    ReplyDelete
  39. yes, these are very basic questions that any interviewer can ask from you. so be prepare while going for interview.
    web designing company india | web development company India

    ReplyDelete
  40. Thanks for sharing the such nice post with the whole world. I know many of the people loves your post and they bookmark your blog like me. love your post keep looking for the new posts. And once again thanks for the sharing. Web Development Service in India

    ReplyDelete
  41. website development is area where every business concern need to concentrate to get the best ROI returns from the website. website as a 24x7 guard to help you to get the business directly in your eating plates!

    ReplyDelete
  42. Thank you for posting such nice article read. I am very glad to read this. Really good one.
    UI Designing Companies in Bangalore, Web Application Development Services in Bangalore

    ReplyDelete
  43. I am very happy when read this blog post because blog post written in good manner and write on good topic. Thanks for sharing valuable information.
    Web Design Company Bangalore,
    Digital Marketing Company

    ReplyDelete
  44. Nice Information you have written here. Really Great Stuff. I keep it bookmark for our future purpose. We also provide Web Design and Web Development Jaipur and SEO Services and 3d Visual Services in Jaipur is area where every business concern needs to concentrate to get the best Role and returns from the website.Visit Us- http://www.crossgraphicideas.com

    ReplyDelete
  45. Hey Nice Blog!! Thanks For Sharing!!!Wonderful blog & good post.Its really helpful for me, waiting for a more new post. Keep Blogging!
    SEO company in coimbatore
    Digital Marketing Company in Coimbatore
    web design in coimbatore

    ReplyDelete
  46. This comment has been removed by the author.

    ReplyDelete
  47. Very Nice Post. I really appreciate with your blog.Thanks for sharing.
    web development company

    ReplyDelete
  48. I and my friends were going through the nice, helpful tips from the blog then the sudden came up with an awful suspicion I never expressed respect to the website owner for those secrets.

    Mobile phone Battery replacement in chennai | Mobile phone unlocking service in chennai | 100% genuine mobile parts | Tab service center in chennai | 100% genuine mobile parts | Mobile phone glass replacement

    ReplyDelete
  49. please visit this site to Buy Youtube Views India at affordable prices that you can easily afford it.

    ReplyDelete
  50. Very nice blog got aware about many questions about web development and designing keep share more knowledge on this.
    https://thewebgross.com/website-designing-services-delhi-india/

    ReplyDelete