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 6

51. What are the CSS Dimension Properties?

  • In CSS you can use following types of Dimension properties to control Width and Height of an Element.

 

Dimension Property

Description

Values

CSS

Width

Specifies the Width of an element

Auto

Value

Percentage%

1

Height

Specifies the Height of an element

Auto

Value

Percentage%

1

Min-width

Specifies the Minimum Width of an element

Auto

Value

Percentage%

2

Max-width

Specifies the Maximum Width of an element

Auto

Value

Percentage%

2

Min-height

Specifies the Minimum Height of an element

Auto

Value

Percentage%

2

Max-height

Specifies the Maximum Height of an element

Auto

Value

Percentage%

2

  • Example of the Width Property:

  • For make a paragraph Width Specified to 200px

.w200 {width: 200px; border: solid ;background-color:yellow;}

 

52. How Many List Style use in CSS?

  • There are three List Style. The list-style shorthand property sets all the list properties in one declaration. This shorthand property sets list-style-type, list-style-position, and list-style-image.

  • List-style-type: This property specifies the list style for item. Possible values could be disc,

  • circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none and so on.

  • List-style image: This property specifies the image instead of above predefined bullets and ordered number. This helps one to give beautiful image icons in front of un-order or order list.

  • List-style position: This property specifies whether the item marker set inside or outside list.

  • Inherit.This property specifies whether the list-style property can be inherited from parent element or not.

 

Example:

<style type="text/css">

.list1 {list-style-type:circle; inside; color:blue;}

.list2 {list-style-type:square; outside; color:orange;}

</style>


 

53. What is CSS Box Model?

  • CSS box model describes the rectangle boxes that are generated for element as explained below.

  • Each box has a content area for Text, Image and optional surrounding for Padding, Border and Margin area

 

Explanation:-

  • Content: This is main content, where text and images are displayed.The content edge surrounds the rectangle given by the Width and Height of the box.

  • Padding: The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is same as the content edge. Content is surrounded by Top, Right, Bottom and Left Padding.

  • Border: The border edge surrounds the box border. If the Border has 0 width, the Border edge is same as the Padding edge. Padding is surrounded by Top, Right, Bottom and Left Border.

  • Margin: The Margin edge surrounds the box margin. If the Margin has 0 width, the Margin edge is same as the Border edge. Border is surrounded by Top, Right, Bottom and Left Margin.

 

 

54. What is Document Style Semantics and Specification Language (DSSSL)?

  • Document Style Semantics and Specification Language is an international standard, an expression language, a styling language for associating processing (formatting and transformation) with SGML documents, for example XML.

 

55. Do any WYSIWYG editors support the creation of Style Sheets? Any text-based HTML editors?

  • As support for CSS in browsers has matured in the last year, both WYSIWYG and Text-based HTML editors have appeared that allow the creation or the assistance of creating Cascading Style Sheet syntax.

  • There are now at least two dozen editors supporting CSS syntax in some form.

  • The W3C maintains an up-to-date list of these WYSIWYG and text-based editors.

 

56. How do I write my style sheet so that it gracefully cascades with user's personal sheet ?

  • You can help with this by setting properties in recommended places.

  • Style rules that apply to the whole document should be set in the BODY element -- and only there.

  • In this way, the user can easily modify document-wide style settings.

 

57.Is there anything that CAN'T be replaced by Style Sheets?

  • Quite a bit actually.

  • Style sheets only specify information that controls display and rendering information.

  • Virtual style elements that convey the NATURE of the content can not be replaced by style sheets, and hyperlinking and multimedia object insertion is not a part of style sheet functionality at all (although controlling how those objects appear IS part of style sheets functionality.)

  • The CSS1 specification has gone out of its way to absorb ALL of the HTML functionality used in controlling display and layout characteristics. For more information on the possible properties in CSS, see the Index DOT Css Property Index.
    Rule of Thumb: if an HTML element or attribute gives cues as to how its contents should be displayed, then some or all of its functionality has been absorbed by style sheets.

 

 

58. What is CSS Grouping Selector?

  • The CSS grouping selectors allows you to specify the same styles on many different elements without repeating the styles in your style sheet.

  • This means that your style sheet will be smaller and download more quickly.To minimize the code, we can use the group selectors.

  • The selectors are separated with each other by a comma.

  • Example: Suppose your CSS sheet is as follows.

 

h1{color:yellow;}

h2{color:yellow;}

h3{color:yellow;}

 

  • Above sheet, can be grouped as follows:

  • h1, h2, h3{color:yellow;}

 

59. What is CSS Nesting Selector?

  • If the CSS is structured well, you won't need to use many class or ID selectors.

  • This is because you can specify properties to selectors within other selectors.

Example:

p{
color:red;
text-align:center;}
.bgyellow{
background-color:yellow;}
.bgyellow p{

color:blue;}

60. How do I have a non-repeating background image?

  • With CSS, you can use the background-repeat property.

  • The background repeat can be included in the shorthand background property, as in this example:

body {
background: white url(example.gif) no-repeat ;
color: black ;
}


Pr.Pg border                                              Next Pg