128
CSS GRAMMAR
VOCABULARY
Fonts
continued
font-family  Sets a speci c font family by name or a generic font
family of serif, sans-serif, monospace, handwritten, or fantasy.
Font names with two or more words must be in quotes (for
example, "lucida sans"). Generic values will use a font de ned
by the browser for that style.
V : inherit | <font-name> | serif | sans-serif | cursive
| fantasy | monospace
M V: Include as many font-names as desired,
separated by commas.  e browser will try each font in
sequence until it  nds one it can use.
font-weight   e boldness of the font, generally a thicker ver-
sion of the default. If a bold version of the font does not exist,
the browser will simulate one based on the default pattern.
V  : normal | bold | bolder | lighter | inherit
font-variant  Sets the small-cap style, where all letters are capi-
tals, but capitalized letters are slightly larger.
V  : normal | small-caps | inherit
font-style  Sets whether a font is italic or oblique. Most brows-
ers will treat both values as italic if a true italic version of the
font exists. If an italic version does not exist, the browser syn-
thesizes an oblique version of the font by slanting the default
version of the font to the right by 15 degrees.
V  : normal | italic | oblique | inherit
font-size  Sets an absolute-size, length, relative-size, or percent-
age based on the size of the font of the parent element.
V  : <length> | <percentage-parents-font-size> | smaller

V  : <color> | inherit
letter-spacing  Places an exact amount of space between each
letter in a block of text to control the letter tracking.  is is
not to be confused with kerning , which uses data from the
font to adjust spacing between letters based on pairing context.
Letter spacing is a crude way to adjust spacing between letters,
since it does not take into account the visual appearance of the
letters. It is best reserved for large text such as headlines.
V  : <length> | <percentage-font-size>% | inherit
word-spacing  Places an exact amount of space between each
word in a block of text. Like letter spacing, this is a rough way
to adjust spacing and is best used with large text.
V  : normal | <length> | inherit
line-height  Controls the spacing between lines in a block
of text. Adjusting line height to at least 1.5 (=150%) or
higher is generally recommended to make large blocks of
text more readable.
V  : normal | <number> | <length>
| <percentage-font-size>% | inherit
white-space  By default, Web browsers collapse multiple spaces
in HTML code into a single space in the Web page and will
automatically wrap text rather than allowing a horizontal scroll.
White space allows you to override both of these defaults to
preserve all white space or prevent text from wrapping.
V  : normal | pre | nowrap | pre-wrap | pre-line | inherit
Text
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
131
color: rgb(128,0,0);
text is maroon

V  : le | center | right | justify | inherit
vertical-align  Sets the vertical positioning of a block of text
in relation to adjacent elements in the same line. Although
seemingly useful for aligning elements, experience shows it
does not behave as designers would expect, since it only works
on inline elements and can not be used to vertically align
blocks of text.  e most common use is for super-scripting
and sub-scripting text.
V  : baseline | sub | super | top | text-top | middle | bottom
| text-bottom | <percentage-line-height>% | <length> | inherit
text-indent  Sets an indent for the  rst line in a block of text.
V  : <length> | <percentage-width>% | inherit
text-decoration  Sets a line to be placed over, under, or through
the text in an element.  e style of the line cannot be con-
trolled and will be the same color as the text.
V  : none | line-through | underline | overline | blink | inherit
text-transform  Sets the capitalization of letters in a block of
text, regardless of the state of the originating text.
V  : lowercase | capitalize | uppercase | none | inherit
Text
continued
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
133
vertical-align: sub;
X
super
X
sub
text-indent: 1em;
One thing was

was the black kitten's fault
entirely.
One thing was certain, that
the white kitten had had
nothing to do with it: -- it
was the black kitten's fault
entirely.
One thing was certain, that
the white kitten had had
nothing to do with it: -- it
was the black kitten's fault
entirely.
Left Center Right Justified
text-transform: uppercase;
text case
Lowercase
Text Case
Capitalize
TEXT CASE
Uppercase
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
134
CSS GRAMMAR
VOCABULARY
All elements have a background that  lls the area of its element
box behind any content and padding, up to its border (see the
next section for details on the element box).  e background can
be a solid color or an image that can be tiled, with its starting
point positioned horizontally and vertically within the box.
background   e shorthand property that lets you set all of the

had grown in the last few
minutes, and she jumped
up in such a hurry that she
tipped over the jury-box
with the edge of her skirt,
upsetting all the jurymen on
to the
Scroll
had grown in the last few
minutes, and she jumped
up in such a hurry that she
tipped over the jury-box
with the edge of her skirt,
upsetting all the jurymen on
to the
had grown in the last few
minutes, and she jumped
up in such a hurry that she
tipped over the jury-box
with the edge of her skirt,
upsetting all the jurymen on
to the
Fixed
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
136
CSS GRAMMAR
VOCABULARY
Background
continued
Image Repeat

repeat-yrepeat-x
no-repeatrepeat
background-repeat: repeat;
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
138
CSS GRAMMAR
VOCABULARY
Image Position
By default, all backgrounds are positioned in the top le corner
of the element they are in, but you can o set that position in a
number of di erent ways. Background positions can be set using
one value or two values to set its horizontal and vertical positions.
background-position  Uses one or two values separated by a
space for the distance from the top or le side of the element
to specify where the background will start to appear.
V  : <length> | <percentage-box-width+padding>% | top
| bottom | center | le | right | center | inherit
M V: One value for both top and le position,
two values separated by a space for top and le respectively.
<length>  Places the background a speci ed distance from
either the top and/or le side of the element. For example, 0 0
is the top le corner. 10px 15px pushes the background start-
ing point down 10px and over to the right by 15px.
<percentage-box-width+padding>  Places the background a dis-
tance from the top and/or le side of the element, calculated as
a percentage of the width or height of the element. For exam-
ple, if the box was 10px by 20 px, and the background position
is set to 25%, the background would be pushed down 5px and
over to the right by 3px (rounding up from 2.5).
top  Places the top of the background image against the top of

with their le and right sides butting against each other, unless
separated by a margin. Inline boxes will  ow until they reach the
right edge of the element and then will have a so -return to the
next line. Boxes that cannot break, such as images, will go o the
right side and either be hidden or require a horizontal scroll.
Block boxes stack on top of each other vertically, with a hard
return above and below the box, with bottom and top sides butt-
ing against each other, unless separated by a margin. Block boxes
will continue down the page, requiring a vertical scroll if the
height of the box does not allow all content to be shown.
Box
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
141
Top
Bottom
RightLeft
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu.
Marging Border Padding
p
consec
Content
ng
t
Element Box
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

element expands the line height of the line it
is on to fi t.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
143
Element 1
Element 3
Element 1 Element 2 Element 3
Inline
#e1, #e2, #e3 { display: inline; }
Element 1
Element 2
Element 3
Block
#e1, #e2, #e3 { display: block; }
#e1, #e3 { display: block; }
#e2 { display: none; }
None
<span id="e1">Element 1</span>
<span id="e2">Element 2</span>
<span id="e3">Element 3</span>
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
144
CSS GRAMMAR
VOCABULARY
Visibility
One way to hide an element is to set the display property to none
and completely remove it from the document. If you want the
element to remain in the document but be invisible, you have
other options:
visibility  Sets whether the box is visible or invisible. A hidden

#e2 { opacity: .5;
lter: alpha(50); }
#e3 { opacity: .25;
lter: alpha(25); }
Element 3
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
146
CSS GRAMMAR
VOCABULARY
Float
A  oating element is one whose box aligns itself to the le or
right. Surrounding content then wraps around it.  is is o en
used to  oat images with or without captions, but can also be
used for sidebars, pull quotes, or any other elements with a close
association with the main text.
 oat  Positions the box to the le or right within its parent
element. Any content below the element will wrap around it
in moving up into the available space. If multiple elements are
 oated next to each other, then they will line up horizontally
as space allows.
V  : le | right | none | inherit
clear  When applied to an element that has been placed below
a  oating element,  oating stops, with the cleared element
again appearing beneath the  oating element. Floating can be
speci cally cleared on the le , right, or completely cleared on
both sides.
V  : none | le | right | both | inherit
Box
continued
The fl oat property

by its ear with one paw, and…
Element 1
One thing was certain, that
the white kitten had had
nothing to do with it: -- it was
the black kitten's fault
entirely. For the white kitten
had been having its face
washed by the old cat for the
last quarter of an hour (and
bearing it pretty well,
considering); so you see that
it couldn't have had any hand
in the mischief.
The way Dinah washed her children's faces was this:
first she held the poor thing down by its ear with one
paw, and…
Element 1
#e1{
width: 75px;
height: 150px;
oat: right; }
#e3{ clear: right; }
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.