└>Lesson 5: CSS Color/Measurement Units
Units of Measurement in CSS
First off we will start with the units of measurement available in css, most often I find myself using px (pixels) and % (percent), but there are many other types available.
| Unit Name |
Description |
Example |
| % |
Percentage Measurement |
width: 50%; |
| px |
Pixel Measurement, a pixel is one dot on your monitor. |
height: 95px; |
| cm |
Centimeter Measurement |
width: 100cm; |
| mm |
Millimeter Measurement |
width: 80mm; |
| in |
Inch Measurement |
width: 7in; |
| em |
Font based Measurement... 1em is equal to the size of the current font, 2em would be equal to double the size of the font. This is handy for scaling some elements based on what size the users font is. I personally dislike using it, but some people swear by it, so try it out and see what you think. |
height: 20em; |
| ex |
Font based Measurement... this is the so called "x-height" of a font, its equal to about half the size of the font. This thought confuses me, so I have never used it, but your free to try it out :) |
height: 20ex; |
| pt |
Point Measurement... 1pt is 1/72 of 1 inch. Some people prefer this over px, but I cant see why... Possibly for print however. |
width: 144pt; |
| pc |
Pica Measurement... 1pc is equal to 12pt |
width: 3pc; |
Color Units
| Unit Name |
Description |
Example |
| color_name |
This is the name of most common colors, such as red, green, blue, orange, etc. |
font-color: red; |
| #rrggbb |
This is the most common form of picking a color, called hex. If you need a chart of the hex colors check out this link |
background-color: #FF0000; |
| rgb(x,x,x) |
a 0-255 measurement of color, red would be rgb(255,0,0), you can also use percentages, i.e. rgb(100%,0%,0%) |
font-color: rgb(255,0,0); |
Now on to Lesson 6, which teaches you how to style links with 4 different effects!
