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 7

 

61. How to use CSS to separate content and design?

  • The idea here is that all sites contain two major parts, the content: all your articles, text and photos and the design: rounded corners, colors and effects.

  • Usually those two are made in different parts of a webpage’s lifetime.

  • The design is determined at the beginning and then you start filling it with content and keep the design fixed.
    In CSS you just add the nifty <link>-tag I’ve told you about to the head of your HTML document and you have created a link to your design.

  • In the HTML document you put content only, and that link of yours makes sure it looks right.

  • You can also use the exact same link on many of your pages, giving them all of them the same design. You want to add content? Just write a plain HTML document and think about marking things up like “header” instead of “big blue header” and use CSS to make all headers look the way you want!

 

62. What is CSS Floating?

  • The CSS Floating properties is often used to push an image to one side or another, while having the text of a paragraph wrap around it.

  • This type of usage is often referred to as text wrapping and resembles what you might see in many magazines that have articles which wrap around images of various shapes and sizes.

  • Wrapping text around an image is easy when using the CSS Float attribute. You have a choice to either float the picture to the left or to the right and the rest is done for you.

  • Example: From the below example, image is floated left with margin 4 pixels.

 

<style type="text/css">

img.floatLeft {

float: left;

margin: 4px;

}

</style>

 

63. What is CSS Positions?

  • The CSS position property changes how elements are positioned on your webpage.

  • CSS provides several methods for positioning elements on the page.

  • They can be positioned relative to where they would normally appear in the flow, or removed from the flow altogether and placed at a particular spot on the page.

  • You can also position an element relative to the browser window and it will stay put while the rest of the page scrolls.

  • Unfortunately, not all positioning methods are well supported to all major browsers.

  • The position property indicates that an element is to be positioned, and specifies which positioning method should be used.

 

64. How Many types of Positions are their in CSS positions?

  • There are four types of Positions and they are Static, Relative, Absoulte and Fixed.

  • Static: This is the normal positioning scheme in which elements are positioned as they occur in the normal document flow. This is default.

  • Relative: Relative positioning moves the box relative to its original position in the flow. The distinctive behavior of relative positioning is that the space the element would have occupied in the normal flow is preserved.

  • Absolute: Absolutely positioned elements are removed from the document flow entirely and positioned relative to a containing. Unlike relatively positioned elements, the space they would have occupied is closed up. In fact, they have no influence at all on the layout of surrounding elements.

  • Fixed: The distinguishing characteristic of fixed positioning is that the element stays in one position in the window even when the document scrolls.

 

 

65. What is CSS Pseudo Elements?

  • CSS pseudo-elements are used to add special effects to some selectors.

  • For the example, you may encounter situations in which you want to select a particular portion of an HTML document but there is not a defined element associated with it. CSS provides the ability to style portions of a document tree without a unique element associated with the content. Because in some ways this creates an element to effect this change, such selectors are dubbed pseudo-element selectors.

  • Syntax: The syntax of pseudo-elements is:

selector: pseudo-element { property: value; }

  • Pseudo-elements can be placed anywhere relatively to the element creating them although the state of the art currently allows only the following:

  • inside the element and before the element's content

  • inside the element and after the element's content

  • inside the element's contents at any depth

  • The notation for a pseudo-element is made of single colon (:) followed by the name of the pseudo-element, possibly immediately followed by a block of parenthesis containing comma-separated arguments.

 

66. What is Pseudo Class Selectors?

  • A pseudo-class is similar to a class in HTML, but it’s not specified explicitly in the markup. Some pseudo-classes are dynamic—they’re applied as a result of user interaction with the document.

  • A pseudo-class starts with a colon (:). No whitespace may appear between a type selector or universal selector and the colon, nor can whitespace appear after the colon.

  • CSS1 introduced the :link, :visited, and :active pseudo-classes, but only for the HTML a element. These pseudo-classes represented the state of links—unvisited, visited, or currently being selected—in a web page document. In CSS1, all three pseudo-classes were mutually exclusive.


67. How are CSS Display Property Works?

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

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

  • Inline:This is default. The element is displayed as an inline-level element (like span)

  • Block:A block element is an element that takes up the full width available, and has a line break before and after it.

  • List-item:The element is displayed as a list-item, which means that it has a bullet in front of it.

  • None: The element will not be displayed at all.

  • Box:The element is displayed as block-level container box.

  • Flex:The element is displayed as block-level flex container box.

  • Inline-flex:The element is displayed as inline-level flex container box.

  • Inline-block:The element is displayed as inline element on the same line as adjacent content.

  • Inline-table:The element is displayed as inline-level table.

  • Table:The element is displayed as a table.

  • Table-caption:The element is displayed as a table caption.

  • Table-cell:The element is displayed as a table cell.

  • Table-column:The element is displayed as a table column.

  • Table-row:The element is displayed as table row.

 

68. How CSS Scrollbars Works?

  • You can use CSS to create your own "inline scrollbars" by creating a box smaller than its contents.

  • You can do this using the overflow property. Specifically, you can use overflow: scroll to force scrollbars to appear when the content overflows.

  • The overflow property, tells the browser what to do if the box's contents is larger than the box itself.

 

69. What are different types of Scrollbars?

  • There are Four types of Scrollbars that is Auto,Hidden,Scroll,Visible.

  • Auto: The purpose is the same as scroll, but the scrollbar will be shown only if the content does overflow.

  • Hidden: The content of the nested element is simply cut off at the border of the containing element and no scrollbars is visible.

  • Scroll: The size of the containing element does not change, but the scrollbars are added to allow the user to scroll to see the content

  • Visible: Allows the content to overflow the borders of its containing element.

  • Example:

  • For Horizontal Scroll bar:

overflow-x: auto;

For Vertical Scroll bar:

overflow-y: auto;

 

70. What is the Caption-side Property in CSS?

  • This property specifies where to place the Caption for a Table.the caption-side value are:

  • Top: This is default. It puts the caption at the top of the table.

  • Bottom: This puts the caption at the bottom of the table.

  • Inherit: This value specifies whether caption-side property can be inherited from parent to child or not.

  • Example: The below example shows the Table with Caption at Bottom

<style>

.capbott {caption-side:bottom;}

</style>


Pr.Pg border                                              Next Pg