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 4

 

31. How do I place text over an image?

  • To place text or image over an image you use the position property.

  • The below exemple is supported by IE 4.0. All you have to do is adapt the units to your need.

<div style="position: relative; width: 200px; height: 100px">

<div style="position: absolute; top: 0; left: 0; width: 200px">

<image>

</div>

<div style="position: absolute; top: 20%; left: 20%; width: 200px">

Text that nicely wraps

</div>

</div>

 

32. How do I combine multiple sheets into one?

  • To combine multiple/partial style sheets into one set the title attribute taking one and the same value to the link element.

  • The combined style will apply as a preferred style:

Example:

<link rel=Stylesheet href="default.css" title="combined">

<link rel=Stylesheet href="fonts.css" title="combined">

 

33. How can you set a minimum width for IE?

  • To set a minimum width, the CSS property is 'min-width'. This can be very useful and works well in good browsers.

  • IE doesn't understand 'min-width'. However, it has a proprietary property called 'expression' which allows us to feed it javascript via a stylesheet.

  • Below is how to set a (780px) minimum width for IE.

 

<!--[if gte IE 5]> <style type="text/css">

body {

width:expression(documentElement.clientWidth < 780 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 780 ? "780px" : "auto") : "780px") : "auto" );

}

</style>

<![endif]-->

  • in an IE conditional comment - the validator will ignore it and the page will get a clean bill of health.

 

34. Can CSS be used with other than HTML documents?

  • Yes. CSS can be used with any structured document format. e.g. XML, however, the method of linking CSS with other document types has not been decided yet.

 

35. How Many Ways to Insert CSS Style?

  • There are three ways you can apply CSS to an HTML document. These methods are such as:

  • Inline style(the attribute style)

  • Internal style sheet (the tag style)

  • External style sheet (link to a style sheet)

Inline Style:

  • An Inline style sheet is a term that refers to style sheet information being applied to the current element.

  • Inline style sheet are should only be used where a particular style is not going to be repeated elsewhere on the page/site.

  • The definition is defined within the HTML tag in the body section of the HTML code. It must be redefined every time it is required

  • As inline style has to be defined every times, it loses its advantages and use this method sparingly.

Internal Style Sheet:

  • An internal style sheet should be used when a single document has a unique style.

  • You define internal styles in the head section of an HTML page, within <style> …. </style> tag

  • This could be useful, for less pages and each pages having different style requirements.

External Style Sheet:

  • An external style sheet is a separate file with .css extension, Where we can declare all the styles that you want to use on your website.

  • External Style sheet is very useful when you want standard style applied to many web pages.

  • It also helps to change look of entire Web-site, just by changing one .css file.

  • The <link> element can be used to include an external style sheet file in your HTML document..

  • The <link> tag is placed within <head> …. </head> section of webpage

 

36. What is <DIV> Tag?

  • The div tag is an HTML tag which is often used in CSS to divide different sections of a web page. It is often used when styling a group of elements (you pretty much use it with ID's and classes).

  • Divs are similar to tables but they are easier to use, customizable with CSS, and load faster than tables.

  • Divs also make it easier for search engine spiders to “crawl" or examine a website – making your website easier to find via Google.

  • Layout: Div layouts can be created within HTML or PHP documents. Div layouts are always modified by using CSS. With CSS you can change the height, width, color, and other elements of a div layout. 

  • Size: You can modify the size of a div in a variety of ways. The most common way to define a div’s size is through pixels.

  • For example, in a CSS document you might code #image1 {height: 24px} to define the height of a div that is used to contain images. You can also define size by a percentage by coding #image1 {height: 24%}.

 

 

37. What is <Span> Tag?

  • The span tag is also an HTML tag but unlike the div, it is used to apply a style in-line rather than to a group of elements.

  • The difference between span and div is that a span element is in-line and usually used for a small chunk of HTML inside a line (such as inside a paragraph) whereas a div (division) element is block-line  (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.

  • The <span> tag provides no visual change by itself.

 

38. What are different types of CSS generic families?

Generic Family

Description

Font example

Sans-serif

Sans-serif fonts are considered easier to read on computer screen than serif fonts.

"Sans" means without, these fonts do not have lines at the end of characters.

Arial font

Verdana Font

Helvetica Font

Serif

Serif fonts have small lines at the end on some characters

Times New Roman Font

Bodoni Font

Georgia Font

 

Monospace

All Monospace characters have same width,

so character 'I' will have same width as character "W" or "M" .

Check example on right hand side.

Courier Font

iiiiiii

WWWWMMM

 

Cursive

These characters are partially or completely connected. These characters looks more like handwritten pen or brush writing than printed letterwork.

French script font

Freestyle script jh

 

Fantasy

These are primarily decorative representation of characters

Goudy font

Amelia BT Font

stopD Font

 

39. How do I quote font names in quoted values of the style attribute?

  • The attribute values can contain both single quotes and double quotes as long as they come in matching pairs.

  • If two pair of quotes are required include single quotes in double ones or vice versa:

<P STYLE="font-family: 'New Times Roman'; font-size: 90%">

<P STYLE='font-family: "New Times Roman"; font-size: 90%'>

  • It's been reported the latter method doesn't work very well in some browsers, therefore the first one should be used.

 

40. Can I include comments in my Style Sheet?

Yes. Comments can be written anywhere where whitespace is allowed and are treated as white space them.

Anything written between /* and */ is treated as a comment (white space).

NOTE: Comments cannot be nested.


Pr.Pg border                                              Next Pg