CSS utility tables

Selectors

* {} selects all elements
p {} selects all <p> elements
*.c {} select all elements where class=”c”
p.c {} selects all <p> elements where class=”c”
#main {} selects on element where id = “main”
a:link {} selects all unvisited links
a:visited {} selects all visited links
a:hover {} selects all links being hovered over
a:active {} selects the current link being activated
a:focus {} selects all links that have the focus
p:first-letter {} selects first letter of all <p> elements
p:first-line {} selects first line of all <p> elements
p:first-child {} selects first child of all <p> elements
#n *.c : first-line {} descendant selector example
#n > *.c > :first-line {} child selector example
#n + *.c + :first-line {} sibling selector example
#n , *.c , :first-line {} applies independent selectors to same block of properties
*[title] {} selects all elements with a title attribute.
*[title~=”WORD”] {} selects all where title attribute contains “WORD”.
*[title=”EXACT_MATCH_OF_ENTIRE_VALUE”} {} selects all with exact attributematch.

Flexible Units of Measure

Unit Description
em em is the font-size assigned to an elment. In the case of the font-size property, it is the font-size assigned to the element’s parent. For example, 5em is five times the font-size. Ems are a useful measure when you want to size an element relative to the size of its text. This allows the layout of your documents to flex with the size of the text.
You can use ems to roughly size the width of an element to fit a certain number of characters. You can do this by multiplying the number of characters by 0.625 to create the em measurement. For example, if you wnat an element to be 10 characters wide, you can set it to 6.25em.
In Internet Explorer 7 and earlier versions, a user can use the View –> Text Size menu to enlarge or shrink the overall size of the text. When you assign font-size:medium to <body> and use ems for all font-size properties, Internet Explorer sizes text relative to the text size chosen by the user. This makes your document more usable to users who want to see text larger or smaller than normal. If you assign a fixed measurement to tfont-size, Internet Explorer uses the fixed size and ignores the text size chosen by the user.
ex ex is the height of the letter “x” of an element’s current font. This measurement is related to the em, but is rarely used.

Fixed Units of Measure

Unit Description
in in stands for logical inches.
in is a “logical” inch because the actual physical size depends on the monitor and setting schosen by the operating system and/or user. The dot pitch of a monitor determines the physical size of its pixels, and thus the physical size of the logical inch. Various operating systems have different settings for dpi. Common values are 72 dpi(Macintosh), 75 dpi(Unix), 96 dpi(Windows Normal), 100 dpi (Unix Large), and 120 dpi (Windows Large). Since the dots on a monitor do not change size, the logical inch is physically larger at 120 dpi than at 72 dpi because the logical inch contains more dots. Thus, setting the width of an element to 96px is the same as setting it to 1in on Windows and 1.33in on a Mac running at 72 dpi.
The problem with logical inches and all other fixed units of measure is that they do not scale well on systems with different dot-per-inch settings. What may seem just right on Windows at 96 dpi may be too large or too small on other systems. Thus, percentages or ems work best when cross-platform compatibility is desired.
px px stands for pixels. Pixels are useful when you want to precisely align elements to images because images are measured in pixels.
pt pt satnds for point. A point is 1/72 of a logical inch.
pc pc stands for picas. A pica is 12 points or 1/6 of a logical inch.
cm cm stands for logical centimeters. There are 2.54 centimeters per logical inch.
mm mm stands for millimeters. There are 25.4 millimeters per logical inch.

Ratios Between Units of Measure at 96 dpi

Value Pixel Point Pica Inch Millimeter
1 pixel =1px =0.75pt (3/4) =0.063pc (1/16) =0.0104in (1/96) =0.265mm
1 point =1.333px (4/3) =1pt =0.083pc (1/12) =0.0138in (1/72) =0.353mm
1 pica =16px 12pt =1pc =0.1667in (1/6) =4.233mm
1 inch =96px =72pt =6pc =1in =25.4mm
1 mm =3.779px =2.835pt =4.233pc 0.039in =1mm

Typical font-size Values at 96 dpi

CSS Ems Points Pixels Percent Heading HTML Physical Size
xx-small 0.50em 6pt 8px 50%     10 pixels
  0.57em 7pt 9px 57%     12 pixels
x-small 0.63em 7.5pt 10px 63% h6 1 12 pixels
  0.69em 8pt 11px 69%     13 pixels
  0.75em 9pt 12px 75%   2 14 pixels
small 0.82em 9.75pt 13px 82% h5   16 pixels
  0.88em 10.5pt 14px 88%     17 pixels
  0.94em 11.25pt 15px 94%     18 pixels
medium 1em 12pt 16px 100% h4 3 18 pixels
  1.08em 13pt 17px 108%     20 pixels
large 1.13em 13.5pt 18px 113% h3 4 22 pixels
  1.17em 14pt 19px 117%     23 pixels
  1.25em 15pt 20px 125%     25 pixels
  1.38em 16.5pt 22px 138%     26 pixels
x-large 1.50em 18pt 24px 150% h2 5 29 pixels
  1.75em 21pt 28px 175%     34 pixels
xx-large 2em 24pt 32px 200% h1 6 38 pixels

Add comment

Loading