min-height
This specifies the maximum height of a block-level element (same values as for
height
).
td {min-height:100px;}
min-width
This specifies the minimum width of a block-level element (same values as for
width
).
td {min-width:200px;}
Value IE N FF Inherited No
auto
7 - 1 Default
auto
[length] 7 - 1 Applies to Block elements
[percentage] 7 - 1
inherit
- 6 1
Value IE N FF Inherited No
auto
7 - 1 Default
auto
[length] 7 - 1 Applies to Block-level elements
[percentage] 7 - 1
inherit
- 6 1
Value IE N FF Inherited No
auto
7 - 1 Default
auto
[length] 7 - 1 Applies to Block elements

relative to parent
element]
3 4 1
inherit
- 6 1
622
Appendix C: CSS Properties
59313bapp03.qxd:WroxPro 3/23/08 2:08 PM Page 622
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
List Properties
List properties affect the presentation of bulleted, numbered, and definition lists.
list-style
This is shorthand allowing you to specify
list-style-position
and
list-style-type
.
ul {list-style: inside disc}
list-style-position
This specifies whether the marker should be placed inside each item of a list or to the left of them.
ul {list-style-position:inside;}
Value IE N FF Inherited Yes
inside
4 6 1 Default
outside
outside
4 6 1 Applies to List elements
inherit
- 6 1
Value IE N FF Inherited Yes

armenian
Traditional Armenian numbering
cjk-ideographic
Plain ideographic numbers
hiragana
(a, i, u, e, o, ka, ki, . . . )
Value IE N FF Inherited Yes
None
4 4 1 Default
disc
disc (default)
4 4 1 Applies to List elements
Circle
4 4 1
square
4 4 1
decimal
4 4 1
decimal-leading-
zero
- - -
lower-alpha
4 4 1
upper-alpha
4 4 1
lower-roman
4 4 1
upper-roman
4 4 1
624

left
take priority).
❑
absolute
can be fixed on the canvas in a specific position from its containing element (which is
another absolutely positioned element); it will also move when the user scrolls the page.
❑
static
will fix it on the page in the same place and keep it there even when the user scrolls.
❑
relative
will be placed offset in relation to its normal position.
❑
fixed
will fix it on the background of the page and not move when the user scrolls.
p.article{position:absolute; top:10px; left:20px;
katakana
(A, I, U, E, O, KA, KI, . . . )
hiragana-iroha
(i, ro, ha, ni, ho, he, to, . . . )
katakana-iroha
(I, RO, HA, NI, HO, HE, TO, . . . )
Value IE N FF Inherited No
[length] - 7 1 Default
auto
auto
- 7 1 Applies to Marker elements
inherit
- 6 1
625

absolute
4 4 1 Default
static
relative
4 4 1 Applies to All elements
static
4 4 1
fixed
- 6 1
inherit
- 6 1
626
Appendix C: CSS Properties
59313bapp03.qxd:WroxPro 3/23/08 2:08 PM Page 626
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
bottom
This sets the vertical position of an element from the bottom of the window or containing element.
right
This sets the horizontal position of an element from the window or containing element.
vertical-align
This sets the vertical positioning of an inline element:
❑
baseline
aligns element with base of parent.
❑
middle
aligns midpoint of element with half the height of parent.
❑
sub
makes element subscript.

- 6 1
627
Appendix C: CSS Properties
59313bapp03.qxd:WroxPro 3/23/08 2:08 PM Page 627
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
❑
top
aligns top of element with top of tallest element on current line.
❑
bottom
aligns element with bottom of lowest element on the current line.
span.superscript {vertical-align:superscript;}
z-index
Controls which overlapping element appears to be on top; works for absolutely positioned elements
only. Positive and negative numbers are permitted.
p {position:absolute; top:10px; left:20px; z-index:3;}
Value IE N FF Inherited No
auto
4 - 1 Default
Depends on position
of element in XHTML
source document
[number] 4 4 1
inherit
- 6 1 Applies to Positioned elements
Value IE N N Inherited No
baseline
4 4 1 Default
baseline
middle

rect(25 100 100 25)
overflow
This specifies how a container element will display content that is too large for its containing element.
p {width:200px; height:200px; overflow:scroll;}
overflow-x
Same as
overflow
, but only for the horizontal x-axis. First supported in IE5.
overflow-y
Same as
overflow
, but only for the vertical y-axis. First supported in IE5.
Value IE N FF Inherited No
auto
4 6 1 Default
visible
hidden
4 6 1 Applies to Block elements
visible
4 6 1
scroll
4 6 1
inherit
- 6 6
Value IE N FF Inherited No
auto
4 - 1 Default
auto
rect
4 6 1 Applies to Block elements

. They are not covered individually, because they are not
supported yet.
Table Properties
Table properties allow you to affect the style of tables, rows, and cells.
border-collapse
This specifies the border model that the table should use (whether adjacent borders should be collapsed
into one value or kept separate).
table {border-collapse:separate;}
Value IE N FF Inherited Yes
collapse
5 7 1 Default
collapse
separate
5 7 1 Applies to Table and
inline
elements
inherit
- 6 1
Value IE N FF Inherited No
outline-color
- - 1.5 Default
none
outline-style
- - 1.5 Applies to All elements
outline-width
- - 1.5
outline
- - 1.5
630
Appendix C: CSS Properties

- 6 1
right
- 6 1
inherit
- 6 1
Value IE N FF Inherited Yes
[length] - 6 1 Default
0
inherit
- 6 1 Applies to Table and inline
elements
631
Appendix C: CSS Properties
59313bapp03.qxd:WroxPro 3/23/08 2:08 PM Page 631
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
table-layout
Specifies how the browser should calculate the layout of a table; can affect the speed of rendering a large
or graphics-intensive table.
Classification Properties
Classification properties affect how the boxes in the box model are rendered.
clear
Forces elements, which would normally wrap around an aligned element, to be displayed below it.
Value indicates which side may not touch an aligned element.
p {clear:left;}
display
Specifies how an element is rendered, if at all. If set to
none
the element is not rendered and it does not
take up any space. Can force an inline element to be displayed as a block or vice versa.
Value IE N FF Inherited No

inherent display type. Block-level elements, such as headings and paragraphs, get treated as if the
default were
block
, whereas inline elements such as
<i>
,
<b>
, or
<span>
get treated as
inline
.
float
Subsequent elements should be wrapped to the left or right of the element, rather than below.
img.featuredeItem {float:left;}
visibility
Specifies whether an element should be displayed or hidden. Even if hidden, elements take up space on
page, but are transparent.
Value IE N FF Inherited No
none
4 4 1 Default
none
left
4 4 1 Applies to All elements
right
4 4 1
inherit
- 6 1
Value IE N FF Inherited Yes
none

5 6 1 Applies to All elements
inherit
5 6 1
Value IE N FF Inherited No
visible
4 - 1 Default
inherit
show
- 4 1 Applies to All elements
hidden
4 - 1
hide
- 4 1
collapse
- - 1
inherit
4 4 1
634
Appendix C: CSS Properties
59313bapp03.qxd:WroxPro 3/23/08 2:08 PM Page 634
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Lengths
Following are the unit measurement for lengths that can be used in CSS.
Absolute Lengths
Relative Lengths
Unit IE N FF
em 4 4 1
ex 4 4 1
px 3 4 1
Unit IE N FF

❑ Color names: A set of names that represent over 200 colors, such as
red
,
lightslategray
,
and
fuchsia
.
In CSS you can also use values to represent the red, green, and blue values that make up each
color.
Using Hex Codes to Specify Colors
When you start using hexadecimal codes (or hex codes for short), they can appear a little daunting.
The idea that colors are represented by a mix of numbers and letters might seem a little strange,
but what follows the
#
sign is actually the amount of red, green, and blue that make up the color.
The format for hex codes is:
# rrggbb
The table that follows provides some examples.
59313bapp04.qxd:WroxPro 3/23/08 2:09 PM Page 637
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Appendix D: Color Names and Values
638
As you might already know, computer monitors work in a color space known as an RGB color space.
When a computer monitor is not switched on, the screen is black because it is not emitting any color. To
create the image you see onscreen, each of the pixels that make up the screen emits different amounts of
the colors red, green, and blue, just like a television screen.
It’s hardly surprising, therefore, that you specify colors in the amounts of red, green, and blue that are
required to make a given color. The values of red, green, and blue required to make a color are between
0 and 255, so when red, green, and blue all have a value of 0 you get black, whereas if each has a value

Appendix D: Color Names and Values
639
These two values on their own will not store much information, yet if you combine 4 bits together, you can
get 16 different values. For example, using combinations of four 0s and 1s, you can represent the digits 0
through 9 (and still have values to spare):
0000 0001 0010 0011 0100 0101 0110 0111 1000 1001 1010 1011 1100 1101 1110 1111
0 1 2 3 4 5 6 7 8 9 - - - - - -
Four bits can be replaced by a single hexadecimal digit. There are 16 digits in hexadecimal numbers to
represent the 16 possible values of four 0s and 1s:
0000 0001 0010 0011 0100 0101 0110 0111 1000 1001 1010 1011 1100 1101 1110 1111
0 1 2 3 4 5 6 7 8 9 A B C D E F
0 is the smallest; F is the largest.
Still, computers need to work with more than 16 possible values, so they tend to store information in even
larger segments. A group of 8 bits is known as a byte. A byte can therefore be represented using just two
hexadecimal digits. For example:
Binary 0100 1111
Hexadecimal 4 F
This gives 256 possible combinations of 0s and 1s, plenty for the characters of the English language, and
yes, that is why colors are represented in numbers between 0 and 255.
So, while hexadecimal codes for web colors may appear a little complicated, I think you would agree
that
#4F4F4F
is a lot easier to read than
010011110100111101001111
. The following table shows some
more hexadecimal codes and their corresponding decimal numbers.
Using Color Names to Specify Colors
Rather than using hex values to specify colors, you can also use color names such as red, green, and
white to specify the color you want. There are more than 200 different color names supported by
Netscape, Firefox, and IE, all of which are listed at the end of this appendix.

tan, white, yellow
Furthermore, if you do jobs for larger companies, such companies often want to specify very exact colors
that represent their brand, and their color might not have an HTML name. Indeed, when clients specify
the color they want, they usually specify a hex code.
Hex Codes versus Color Names
It may seem as though color names are more straightforward to use than hex codes; if you use colors such
as red, orange, green, blue, black, and white, then they are simple to remember and use. However, remem-
bering
each color name and the color it gives you is very difficult.
In practice, you often end up referring to a color chart to find the color you want, whether you’re work-
ing with hex codes or color names. Given that hex codes give you many more choices of shades, tints, and
hues of colors than color names, and bearing in mind that a lot of companies ask for specific colors to
represent their company, hex codes tend to be the choice of web professionals.
If you are using either a graphics program or a web page authoring tool, that program will usually gen-
erate the color code you need for you, and many graphics packages also have a color-picking tool to help
you select the exact color you want. You can also find color picking tools on several web sites such as
www.visibone.com/colorlab/
. Figure D-2 shows the color picker from Photoshop.
Figure D-2
Note that the checkbox on the bottom left of this window indicates an option to use only web-safe colors.
This is for a restricted color palette (containing a subset of all colors available) known as the Web Safe Color
Palette, which was designed in the days when computers did not support as many colors. Nowadays,
59313bapp04.qxd:WroxPro 3/23/08 2:09 PM Page 640
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.