HTML and CSS Reference
In-Depth Information
Unit
Description
Examples
RGBa Color
This is like RBG color but adds an alpha
channel value to specify the opacity of the
color. An RGBa is specified via a function
style
rgba(
r
,
g
,
b
,
a
)
value, where colors
r, g, and b are specified as a decimal
value from 0 to 255 or a percentage from
0 to 100%, and the alpha channel value
for defining opacity is a number between
0 (fully transparent) and 1 (fully opaque).
Values outside this range will be rounded
up or down to fit the closest value.
#redtrans {
color:rgba(255,0,0,0.4);}
Keywords
There are numerous keyword values found
in CSS for specifying sizes (
xx-large
),
border styles (
dashed
), text-formatting
(
underlined
), element meaning (
block
),
layout (
absolute
), and more. If a value
is not found within quotes or followed
by a measurement, it is likely a keyword
or counter. If it isn't or is simply not an
understood value, it will be ignored by CSS-
conforming user agents.
.big {
font-size: xx-large;}
#box {
border: 1px solid black;}
#boom {
border: 3px crazy black;}
/* value of crazy
is ignored */
Counters
ol.cT {
counter-reset:counter1;
list-style-type: none;}
ol.cT li:before {
counter-increment:
counter1;
content:
counter(counter1) " - " ;}
Numbers
There are occasions where CSS supports
simple positive or negative integer values
like 2 and -3 as well as real numbers like
3.5. Note that in the case of 0 values, it
is not required to put a measurement unit
like
px
and thus a plain zero value will be
commonly seen.
p {line-height: 2;}
/* same as 200% */
* {margin: 0;}
Percentages
Percentages are denoted by a number
followed by the
%
symbol and are always
relative to another value such as a length.
Quite often they are used to specify some
value relative to an inherited value from a
parent element.
body {font-size: 10px;}
body > p.big
{font-size: 200%;}
/* 20 px */
body > p.small
{font-size: 50%;}
/* 5px */
T
ABLE
4-11
CSS Units and Lengths
