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

CSS Interview Questions and Answers Part 8

 

71. What is the Display Property in CSS?

  • The display property defines how a certain HTML element should be displayed

  • CSS1 only defines inline, block, list-item, and none.

  • Some of the display property value are: Inline, Block, List-Item, Box, flex, inline-flex, inline-table,Table etc.

  • Example: From the below style sheet,heading h1 display in table with border solid 1 pixels.

<style>

h1 {display:table;border:solid 1px;}

</style>

 

72. What is the CSS Cursor Property?

  • The cursor property specifies, how cursor will be displayed when you point it on an element.

  • The following are cursor values are such as:

  • auto: Shape of the cursor depends on the context area it is over. For example an I over text, a hand over a link, and so on

  • crosshair: A crosshair or plus sign

  • pointer: A pointing hand (in IE 4 this value is hand)

  • move: The I bar

  • e-resize: The cursor indicates that an edge of a box is to be moved right (east)

  • ne-resize: The cursor indicates that an edge of a box is to be moved up and right (north/east)

  • nw-resize: The cursor indicates that an edge of a box is to be moved up and left (north/west)

  • n-resize: The cursor indicates that an edge of a box is to be moved up (north)

Example:

<span style="cursor:crosshair">crosshair</span>

 

73. What is CSS Transform Property?

  • This property provides some sort of animation to element.

  • The transform property is supported in Internet Explorer 10, Firefox, and Opera.

  • Internet Explorer 9 supports an alternative, the -ms-transform property (2D transforms only).

  • Safari and Chrome support an alternative, the -webkit-transform property (3D and 2D transforms).

  • Opera supports 2D transforms only.

 

74. What is Relative Positioning in CSS?

  • Relative positioning moves the box relative to its original position in the flow ie. The position a box will take if it is moved from its normal position.

  • We can use two values top and left along with position property to move an HTML element anywhere in HTML document. 

  • Here's a quick reference when moving HTML elements in CSS.

  • Move Left Use a negative value for left.

  • Move Right Use a positive value for left.

  • Move Up Use a negative value for top.

  • Move Down Use a positive value for top.

 

75. What is Fixed Positioning in CSS?

  • The fixed positioning is that the element stays in one position in the window even when the document scrolls.

  • You can use two values top and left along with position property to move an HTML element anywhere in HTML document. Here's a quick reference when moving HTML elements in CSS.

  • Move Left - Use a negative value for left.

  • Move Right - Use a positive value for left.

  • Move Up - Use a negative value for top.

  • Move Down - Use a positive value for top.

  • IE6 (Internet Explorer 6) does not support the fixed value for the positioning of an element. Thus it will not position fixed elements correctly and will still scroll with the page.

  • To see this effect in action you will need to use a standards compliant browser, such as Firefox 1.0, safari 1.0,etc.

  • Example: The below style sheet display a paragraph with fixed position.

 

<style type="text/css">

p.position_fixed

{

position:fixed;

top:40px;

right:50px;

background-color:pink;

}

</style>

 

76. What is border collapse in CSS?

  • This property specify whether the table border shows as single collapsed border or shown as separate borders.

  • The following values are border collapse:

  • Collapse: Specifies that table border are shown as single collapsed border.

  • Separate: Specifies the table border as separate borders.

  • Example:

<style>

.one {border-collapse:collapse;}

.two {border-collapse:separate;}

table, td, th

{border:1px solid black;}

</style>

77. What is the border color property in CSS?

  • This property defines the color of an elementís border.the border color values are:

  • Color: Specifies the border color. You can specify valid CSS color code.

  • Transparent: Specifies the border color as transparent.

  • Example:

  • A single value copies the color to all border sides.

  • Example border-color: blue;

  • All four borders to blue.

  • If you specifies only two values, the first sets the border colorwill set it for the top and bottom, and the second sets of border colorwill set it for right and left.

  • Example border-color: red blue;

  • Top and bottom borders are red.

  • Left and right border are blue

.

78. What is the border width property in CSS?

  • The border-width property sets the width of an elementís complete border. The value of border width is:

  • non-negative length: Sets thickness of border.

  • Thin: Sets a thin border.

  • Medium: Sets Medium border. This is Default.

  • Thick: Sets thick border.

  • Example:

<style>

.thin {border-style:solid;border-width:thin;}

.medium {border-style:solid;border-width:medium;}

.thick{border-style:solid;border-width:thick;}

.pixel10{border-style:solid;border-width:10px;}

</style>

 

79. What is the Margin property in CSS?

  • This is shorthand property which sets the space between four sides in one statement. The values of margin properties are:

  • Value: Specifies the margin in px, pt, or em.

  • Percentage%: Specifies the margin in % of the containing element.

  • Auto: Browser calculates margin automatically.

  • Example:

  • Each individual margin value can be set from one to four values.

  • A single value copies the margin to all four sides.

  • Example margin: 5px;

  • All four margin of 5px.

  • If you specifies only two values, the first sets the marginwidthwill set it for the top and bottom, and the second sets the margin will set it for right and left.

  • Example margin: 10px 20px;

  • Top and bottom margin are 10px.

  • Left and right margin are 20px.

 

80. What is padding properties in CSS?

  • This is shorthand property which sets the space between four sides of its content.the values of padding properties are:

  • Value: Specifies the padding in px, pt, or em.

  • Percentage: Specifies the padding in % of the containing element.

Example:

  • A single value copies the padding to all four sides.

  • Example padding: 5px;

  • All four padding of 5px.

  • If you specifies only two values, the first sets the paddingwidthwill set it for the top and bottom, and the second sets the padding will set it for right and left.

  • Example padding: 10px 20px;

  • Top and bottom padding are 10px.

  • Left and right padding are 20px.

 

 

Pr.Pg