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 3

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

Example:

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.

 

22. What is attribute selector?

  • The CSS specification has defined attribute selectors. These selectors enable us to not only match on a given element’s class, but on any other attribute it possesses.

  • Denoted by a set of square brackets, attribute selectors can match in any of the ways shown in the following table. Where x is denoted as ‘Attribute’ and y is ‘value’.

 

Attribute Selector Syntax

Result

[x]

Matches when the element has the specified x attribute, regardless of the value of that attribute.

[x=y]

Matches when the element’s x attribute has a value that is exactly y

[x-=y]

Matches when the value of the element’s x attribute is a space delimited list of words, one of which is exactly y.

[x|=y]

Matches when the value of the element’s x attribute is a hyphen-separated list of words beginning with y

[x$=y]

Matches all elements with the specified x attribute that END with the specified value y.

[X*=y]

Matches all element/attribute x combinations that have at least one occurrence of the indicated value y as a substring

[x~=y]

This is a special form of the Attribute Value Selector, allowing a portion of an attribute value to be exactly matched where the portions of the attribute value are separated by spaces.

 

 

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.

Example:

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> <p>Red and white paragraph </p> </body>

Example:

body ~ p ~ em {background: red; color: white}

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

<body> <p> <em>Red and white EM </em> </p> </body>

 

24. What is initial value?

  • Initial value is a default value of the property, that is the value given to the root element of the document tree.

  • All properties have an initial value. If no specific value is set and/or if a property is not inherited the initial value is used.

  • For example the background property is not inherited, however, the background of the parent element shines through because the initial value of background property is transparent.

<P style="background: red">Hello <strong>World </strong> </P>

  • Content of the element P will also have red background

 

25. Can I attach more than one declaration to a selector?

  • Yes. If more than one declaration is attached to a selector they must appear in a semi colon separated list,

Example:

Selector { declaration1; declaration2 }

P { background: white; color: black }

 

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

 

27.'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/image_name.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 <body> element, non-scrolling and non-repeating - in IE.

 

 

28. What are the advantages/disadvantages of the 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

 

29. What are the advantages/disadvantages of the 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.

 

30. What are the advantages/disadvantages of the Inline style Sheets?

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.


Pr.Pg border                                              Next Pg