CSS Properties, Sizes and Colors

Let’s look a little more at CSS values. Values correspond to a number of properties. Two of the most used values are color and size.

Color can be specified in three ways. First, and the most straightforward is just to write out the color, like color—red, or background-color—white.

The next way is to use a special code called the hexadecimal code. The hex code is a six digit code comprised of letters and numbers. The first two digits correspond to the level of red, the second two to the level of green, and the last two, to the level of blue. If a hex code repeats a digit for the red green and blue values, like black does with pound—000000 it can be shortened to three characters, pound—000. Or, pound—AA4477 could be shortened to pound—A47. There are a lot of great color pickers out there. Check them out. We’ll list a few in the description of the video.

Last, is to use the RGB color model. And with CSS3 you can add an A, so RGBA. A stands for alpha and represents the transparency of the color. You can specify colors with a mix, like color: rgba (0, 100, 0, 0.5). So this is green with a 50% transparency.

Size is a big part of CSS, just like with these puppies (gesture at boobs). There are several methods to specify size with CSS. The most common are pixels, percent, and Ems.

Pixels are the most common unit used in CSS. A pixel is the smallest unit a screen can display. Since monitors display at different resolutions, pixel units may differ from computer to computer.

Percentages are used to scale an html element from its default size. Values less than 100% scale the element down and values larger than 100% scale it up.