CSS

1. CSS Home 2. CSS Introduction 3. CSS Versions 4. CSS Extension 5. Adv.& Disadv of CSS 6. HTML v/s CSS 7. CSS Syntax 8. CSS Selector 9. Inserting CSS file 10. Class 11. ID 12. Div 13. Font 14. Font-size 15. Font-weight 16. Font-style 17. Font-variant 18. Text 19. Text-color 20. Text-decoration 21. Text-transform 22. Text-indent 23. CSS Color 24. Web Safe Color 25. Background-image 26. Background-repeat 27. Background-position 28. Background-attachment 29. Background-size 30. Background-origin 31. CSS Box Model 32. Padding 33. Padding-top 34. Padding-right 35. Padding-bottom 36. Padding-left 37. Margin 38. Margin-top 39. Margin-right 40. Margin-bottom 41. Margin-left 42. Margin Demonstration 43. Border 44. Border-style 45. Different Border-style 46. Border-width 47. Different Border-width 48. Border-color 49. Border-radius 50. Border-collapse 51. Border-spacing 52. Border-image 53. Border-bottom 54. Border-bottom-style 55. Border-bottom-width 56. Border-bottom-color 57. Border-bottom-left-radius 58. Border-bottom-right-radius 59. Border-top 60. Border-top-style 61. Border-top-width 62. Border-top-color 63. Border-top-left-radius 64. Border-top-right-radius 65. Border-right 66. Border-right-style 67. Border-right-width 68. Border-right-color 69. Border-left 70. Border-left-style 71. Border-left-width 72. Border-left-color 73. Ex.Padding,Border,Margin 74. List Style 75. List Style-type 76. List Style-position 77. List Style-image 78. Dimension Properties 79. Width 80. Max-width 81. Min-width 82. Height 83. Max-height 84. Min-height 85. Grouping Selector 86. Nesting Selector 87. Floating 88. Position 89. Pseudo Element 90. First-letter Pseudo 91. First-line-Pseudo 92. Before & After Pseudo 93. Pseudo-class Selector 94. tag 95. Image Gallery 96. Scrollbars 97. Display Property 98. Cursor Property 99. Caption-side Property 100. Transform Property 101. Interview Question and Answer part 1 102. Interview Question and Answer part 2 103. Interview Question and Answer part 3 104. Interview Question and Answer part 4 105. Interview Question and Answer part 5 106. Interview Question and Answer part 6 107. Interview Question and Answer part 7 108. Interview Question and Answer part 8
Pr.Pg Next Pg

CSS Interview Questions and Answers Part 1

1. What is CSS (Cascading Style Sheets)?

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

  • CSS is a web standard that describes style for XML/HTML documents.

  • CSS is a language that adds style (colors, images, borders, margins…) to your site. It’s really that simple. CSS is not used to put any content on your site, it’s just there to take the content you have and make it pretty. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, and spacing) to Web documents. This is also where information meets the artistic abilities of a web-designer. CSS helps you spice up your web-page and make it look neat in wide variety of aspects.

 

2. Syntax of CSS?

  • The CSS syntax consists of a set of rules. These rules have 3 parts: a Selector, a Property, and a Value.

  • Selector: The selector is often the HTML element that you want to style. It can be <h1> or <table> etc.

  • Property: A property is something that we attribute to the class. The property modifies how the class looks/behaves. Common examples are: border, margin and background.

  • Value: A value is associated to a property; it tells how the property will affect the class.

  • Syntax: You can put CSS Style Rule Syntax as follows:

selector { property: value }

  • Example: The following example is used to give a color to all level 1 headings :

h1 { color: #ff0000; font-size: 24 px; }

  • Every CSS rule comprises these two parts: a selector, which tells the browser which element(s) will be affected by the rule; and a declaration block, which determines which properties of the element will be modified.

  • From the above example, to give a color to all level 1 heading.

  • The braces encompass the declaration block, which is the real meat of the rule. It consists of one or more declarations, as well as a property/value pair that decides how the elements in the selector will be styled.

  • In above example, color is the property, and #36C is its declared value.

 

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

 

4. What is value?

  • Value is a 'physical' characteristic of the property. Property declares what should be formatted, e.g. FONT while value suggests how the property should be formatted, e.g. 12pt. By setting the value 12pt to the property FONT it is suggested that the formatted text be displayed in a 12 point font. There must always be a corresponding property to each value or set of values.

  • H1 {font: bold 180%}

  • In the example above the H1 selector is declared the FONT property which in its turn is declared the values BOLD and 180%.

  • The values suggesting alternatives are specified in a comma separated list, e.g.

  • H1 {font-family: font1, font2}

 

5. What are different versions of CSS?

Properties

Description

CSS1

Classic CSS implementation that introduced text, list, box, margin, border, color, and background propertie, Initially defined in 1996, most every feature of CSS1

is supported in Web browsers, but small quirks do exist around some lesser-used features like white-space, letter-spacing, display, and others. Some

Problems with CSS1 support are more significant in older, pre–Internet Explorer 7browsers.

CSS2

CSS2, which became a W3C recommendation in May 1998, builds on CSS1 and adds support for media-specific style sheets (e.g. printers and aural devices), downloadable fonts, element positioning and tables.

CSS2.1

CSS 2.1 went to Proposed Recommendation on 12 April 2011. After being reviewed by the W3C Advisory Committee, it was finally published as a W3C Recommendation on 7 June 2011

A revision of the CSS2 specification that makes some corrections and is normalized to more clearly represent what most browser vendors have implemented. Note that many CSS2 features removed from this specification are found in CSS3 modules. This is currently the recommended CSS specification for study and use.

CSS3

Due to the modularization, different modules have different stability and statuses.[As of June 2012, there are over fifty CSS modules published from the CSS Working Group. CSS3 is a Modularized specification of CSS. Various modules extend and improve aspects of previous CSS versions; for example, the CSS3 Color module addresses color correction, transparency, and more, while the CSS3 Fonts module addresses features to add effects to fonts, adjust their display, and even download custom Fonts.

 

6. What is CSS Extension Prefixes?

  • CSS vendor prefixes or CSS browser prefixes are a way for browser makers to add support for new CSS features in a sort of testing and experimentation period.

  • Unlike (X) HTML, CSS makes it easy for browser vendors to extend the specification, as newly introduced keywords and property names that start with a hyphen “-" or underscore“_" are considered vendor-specific extensions.

  • The syntax is -vendoridentifier-newproperty or_vendoridentifier-newproperty, though in practice the hyphenated names appear to be the only extensions in use.

  • Example, -moz is used to prefix Mozilla features like -mozborder-radius.


 

7. What are the advantages of CSS?

  • CSS saves time: When you use CSS, you only have to specify details and changes for any elements only once. CSS will automatically apply changes to specified styles whenever that element is used.

  • Easy to change the style: CSS makes it very easy to change the style of a document. For example, we wanted to move the picture in the title of this page to the right by 20 pixels. This would be a nightmare in a table based design. We would have to open every page and alter the table width manually. Fortunately we have used CSS, and all we have to do is open our CSS file which stores the layout of the site, and change the number relating to the position of the image. That will change his position throughout the whole site.

  • Improved Search Engine Results: With use of CSS, you can keep your HTML code much cleaner. As a result search engine bots do not have to separate the real content from the junk code. You are also free to put any content anywhere in your document with CSS. This will aid the search engine crawlers to identify the important content first.

  • Sites Load Faster: As the style sheets are lighter, it will enable the websites to load faster. Since table layouts are no longer required in CSS, the sites take up less memory and load faster. The users will find it easier to view a site designed using CSS as it will load in a fast pace and can be swiftly navigated from one page to other.

  • Consistency: Layout and position of navigation can be completely consistent across a site. This was previously possible only using frames.

 

8. What are the disadvantages of CSS?

  • Inconsistent Browser Support: CSS does not work consistently in different browsers. Some browser developers decide to come up with their own proprietary tags. Microsoft Internet Explorer and Opera support CSS as different way. Unfortunately their logic does not conform to current CSS standards.

  • Lack of Variables: CSS contain no variables. This makes it necessary to do a "replace-all" when one desires to change a fundamental constant, such as color scheme or various heights and widths.

  • Lack of column declaration: While possible in current CSS 3 (using the column-count module),layouts with multiple columns can be complex to implement in CSS 2.1. With CSS 2.1, the process is often done using floating elements, which are often rendered differently by different browsers, different computer screen shapes, and different screen ratios set on standard monitors.

 

9. What is cascade?

  • 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 *

 

10. Is CSS case sensitive?

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

  • It is a good idea to avoid naming classes where the only difference is the case, for example:

div.myclass { ...}

div.myClass { ... }

  • If the DOCTYPE or XML declaration is ever removed from your pages, even by mistake, the last instance of the style will be used, regardless of case.

Pr.Pg border                                              Next Pg