CSS Reference
Appendix D
CSS Mini Reference
This appendix is a ha ndy list of some of the most useful CSS proper ties, pseudo-
elements, and pseudo-classes. Mainly they are older and well-establishe d properties,
but included are also some of the CSS3 properties th at are well supported by mod-
ern browsers. If you want to p lunge deeper into CSS, there exist many exhaustive
sources that you might want to look at. For example,
CSS3 by D. S. McFarland,
or
developer.mozilla.org/en-U S/docs/CSS/CSS_Reference. For fu ll de ta ils about the
latest CSS specification right from the horse’s mouth , visit the World Wide Web Con-
sortium at
www.w3.org/Style/CSS/current-work.
D.1 CSS Data Types
Each CSS declaration consists of a property name and a correspond ing value. Value s
are categorized according to CSS data types, some of which are described in this
section.
<color> Data Type
The <color > CSS data type is used to specify a color. Most usually, a color is assigned
to f onts, borders (inc luding shadows), and back grounds. A color can be sp ecified
either by using one of the available keywords, or by using the RGB model, which
allows you to mix red, green, and b lue components to get a color of your liking.
Color Keywords
You can specify color directly by its name using a color keyword. Color keywords
are case-insensitive. Although there are more of them, only 17 color names are cur-
rently under sto od by all browsers: aqua, black, blu e, fuchsia, g ray, green, lime ,
maroon, navy, olive, orang e, purple, red, silver, teal, white, and yellow.
Note that none of the colors defined by keywords can have any transparency. If you
want to use transparent colors, then you must use the rgba() fun ction.
A special color keyword is the transparent keyword, which represents a fully trans-
parent color. Technically, this is a b la ck color having the alpha chann el set to its lowest
value and it is equivalent to rgba(0, 0, 0, 0).
339
RGB Values
Colors can be specified using the RGB model in either a hexadecima l or functional
notation.
The hexadecimal nota tion is composed of a hash sign (#) followed by either six or
three hexadecimal numbers (i.e., de cimal digits 0–9 and letters A–F), specifying the
amount o f red (R), green (G), and blue (B) light to use:
#RRGGBB
#RGB
Both no ta tions are e quivalent and you can get the longer one simply by duplicating
each of the three hexadec imal digits of the shorter one. The next two lines both repre-
sent exactly the same screaming green color:
#66ff11
#6f1
Lower- as well as upper-case letters can be used as hexadecimal digits A–F.
The other method of specifying RGB colors is a functional notation. This notation
uses the rgb() function with three <integer> values between 0 and 255, or three
< percentage> values between 0 and 100% as arguments:
rgb(<integer>, <integer>, <integer>)
rgb(<percentage>, <percentage>, <percentage>)
Using the fu nctional notation, the same screa ming green color can be expressed like
this:
rgb(102, 255, 17)
rgb(40%, 100%, 6.7%)
The integer number 255 is identical to FF in hexadecimal notation, o r to 100 %. Note
that it is not possible to use hexadecimal numbers with the rgb( ) function.
RGBA Values
The RGBA color mode l extends the RGB model with the alpha channel, which spec-
ifies the color opacity. The opacity is specified by a real number betwe en 0 (meaning
completely invisible) and 1 (totally opaque) as a fourth argument o f the rgba() func-
tion. You can use either three <integer> o r three <p ercentage> values for a color, and
a <numb er> value for opacity:
rgba(<integer>, <integer>, <integer>, <number>)
rgba(<percentage>, <percentage>, <percentage>, <number>)
340 CSS Reference
CSS Reference
For example, the following two lines both cre ate a semi-transparent green:
rgba(0, 255, 0, 0.5)
rgba(0%, 100%, 0%, 0.5)
<integer> Data Type
The <integer> CSS data type is used to specify an integer. An integer is composed of
any number of decimal digits 0–9, preceded by an optional + or − sign. Any <integer>
value is also a <number> value, while the o pposite is not true.
<length> Data Type
The <len gth> CSS data type is used for specifying distance measures. It is composed
of a <number> directly followed by a length unit. No space is allowed between the
number and the unit literal. Note that for certain CSS properties, negative lengths are
also allowed. For example, by specifying either a negative or positive <length> for
the text-indent prop erty, you specify whe ther text is indented to the left o r right.
Some properties that accept <length> values also accept <percentage> values. Note,
however, that <percentage> values are not <length> values.
Units
CSS provide s a numbe r of different units to measure lengths. Although there is no
limit on which units can be used with w hich property, you will generally not u se
units like centimeter (cm) or inch (in) for an on-screen display. Those units are more
appropriate for printing on paper. For display on screen you will almost exclusively
use ems (e m) if you want relative units or pixels (px) if you want absolute units. You
can rea d more about ems on page 67, and about CSS pixels on page 47.
For measurements of zero length it is not n ecessary to use units. For example, instead
of 0px you can simply write 0.
<number> Data Type
The <number> CSS data type is used to specify a real number. A <number> is
composed of an <integer> part, possibly extended with a fractional part—a decimal
point (.) followed by any number of decimal digits 0–9. The integer part can also be
omitted. Note that any <integer> value is also a <number> value, while the opposite
is not true.
These are examples of valid <n umber> values:
42
3.14159
-273.15
.99
D.1. CSS Data Types 341
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.