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 font size tutorials

  • This is one of the most confusing aspects of CSS styling of font-size attribute for text scaling.

  • It Specifies the size of the text.

  • CSS offers four units that can be used to specify size of text.

  • Four units are "Ems" (em), Pixels (px), Points (pt) and Percentage (%).

 

Font units

Description

Ems (em) :

The "em" is a scalable unit that is used in web industry. 1em is equal to 12pt, 2em equals to 24 pt and like wise .5em equals to 6pt. Usage of Ems are becoming increasing popular in web industry.

Pixel (px) :

Pixel is fixed size unit in accordance to computer screen. One pixel is equal to one dot on computer monitor. Many web developers use pixel units in webpages to produce pixel perfect for their sites. However this could be problematic situation for new devices like Tablets, Mobile and Ipads.

Points (pt) :

Points are used in printing media industry. Where one inch=72 points, or 1 point=1/72 of an inch. They are fixed sized units and cannot scale in size.

Percent (%) :

percent units are like "em" unit. The current font-size is equal to 100% (i.e. 12pt = 100%). Percent unit is fully scalable for mobile devices.

 

  • For easy understanding we can say 1em = 12pt = 16px = 100%.

  • The "em" unit is new and upcoming standard for web, in practice the percent units provides more consistent and accessible display for user.

  • Managing the text size is important in web design, however, you should not use font size to make paragraphs look like headings, or headings look like paragraphs.

  • The font size can be set in Absolute or Relative.

Absolute size:

  • Sets the text to a specified size.

  • Does not allow a user to change the text size in all browsers (bad for accessibility reasons)

  • Absolute size is useful when the Physical size & Resolution of the Monitor will remain fixed and known.

 

Relative size:

  • Sets the size relative to surrounding elements

  • Allows a user to change the text size in browsers

 

CSS Version

CSS1

Default Value

medium

Inherited

Yes

JavaScript Syntax

object.style.fontSize="24pt"

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.

 

Note: If you do not specify font size, the default size for normal paragraph text is 16px i.e. 1em.

 

Example: Following example shows the use of CSS font-size using pixel and ems (px and em)
Output:

Note: - if you observe properly

  • Heading 1 (48px) looks similar to Heading 4 (i.e. 3em),

  • Heading 2 (32px) looks similar to Heading 5 (i.e. 2em),

  • Heading 3 (16px) looks similar to Heading 6 (i.e. 1em),

 

Note:- Works well with Chrome, IE9, Firefox, Opera and Safari.

 

Pr.Pg border                                              Next Pg