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 Fonts tutorials

  • In CSS, Font properties helps to specify Font family, boldness, size and style of text.

Following are common Font Properties.

 

Properties

Description

font-family

Helps to specify font family for text.

font-size

Helps to specify font size of text

Font-style

Helps to specify font style of text i.e. normal, italic, oblique

font-weight

Helps to specify weight of font i.e. from 100 to 900

font-variant

Helps to specify font variant i.e. normal, small cap

 

font-family : <family name>,<family name>,<generic family>

  • After the color, the font is one of the most important property of web page.

  • Since all fonts installed on your computer while developing your pages, might not be available on all computers, CSS provides a system of fallback.

  • <family name> is name of font family of your choice.

  • You should specify font names in sequence i.e. font name you want first, then second font name if first is unavailable, then third font name if second is unavailable and so on.

  • You should end the list with a generic font name.

  • If font name includes space, digits or other characters, then write font name in quote " ".

  • The following generic families are defined.

'sans-serif' (e.g. Arial, Verdana, Helvetica )

'Serif' (e.g. Times )

'Monospace' (e.g. Courier)

'cursive' (e.g. Zapf-Chancery )

'fantasy' (e.g. Western)

 

  • Following table would give you an idea of different type of fonts.

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

 

Fantasy

These are primarily decorative representation of characters

Goudy font

Amelia BT Font

stopD Font

 

CSS Version

CSS1

Default Value

Not specified

Inherited

Yes

JavaScript Syntax

object.style.fontFamily="arial,verdana,sans-serif"

Browser Supported

Ch-fox-ie-op-sa

Note

The value "inherit" is not supported in IE7 and earlier versions. IE8 requires a <!DOCTYPE> declaration. IE9 supports "inherit" value.

 

Example:

Body {font-family: Arial, Verdana, Sens-serif ; }

H1 {font-family: "Times New Roman", Bodoni, serif; }

 

Example: Following example demonstrates how to set the CSS font family of an element
Output:
Pr.Pg border                                              Next Pg