Property Value Metrics - HTML

Now that you know how to apply values to properties, let’s talk about the values themselves. You can specify your values using several different metrics, depending upon your needs and use.

CSS styles support the following metrics:

  • CSS keywords and other properties, such as thin, thick, transparent, ridge, and so forth
  • Real-world measures
  • inches (in)
  • centimeters (cm)
  • millimeters (mm)
  • points (pt)—the points used by CSS2 are equal to 1/72th of an inch
  • picas (pc)—1 pica is equal to 12 points
  • Screen measures in pixels (px)
  • Relational to font size (font size (em) or x-height size (ex)
  • Percentages (%)
  • Color codes (#rrggbb or rgb(r,g,b))
  • Angles
  • degrees (degs)
  • grads (grad)
  • radians (rad)
  • Time values (seconds (s) and milliseconds (ms))—used with aural style sheets
  • Frequencies (Hertz (Hz) and kilo Hertz (kHz))—used with aural style sheets
  • Textual strings

Which units you use depends on which properties you are setting and what the application of the document is. For example, it doesn’t make any sense to set the document’s property values to inches or centimeters unless the user agent’s display is calibrated in real-world measures or your document is meant to be printed.

In the case of relational values (percentages, em, and so on), the actual value is calculated on the element’s parent settings. For example, consider the following two definitions for the <i> element. Both of definitions will set the font size of all italic elements to 11pts, by specifying 1.1 times the parent’s font size, or 110% of the parent’s font size. The output of this code is shown in Figure.

Using the em and percentage metrics, you can define elements to be a relative size, driven by the elements around them.

Using the em and percentage metrics, you can define elements to be a relative size, driven by the elements around them.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics