<percentage> Data Type
The <percentage> CSS data type is used to specify percentages. Percentage s are
composed of a <number> dir ectly f ollowed by a percentage sign (%). There is no
space betwe en the number and the percen ta ge sign.
Even if many length properties accept percentages as relative units, the <percentage>
data type is not the <length> data ty pe. You can read more about how to use percent-
ages as length me asurements on page 68.
<url> Data Type
The <ur l> CSS data type repre sents a reference to an external resource. It is expressed
exclusively by means of the url () function, which accepts as an argumen t the URL of
the resource. The URL does not nee d to be quoted unless it contains spaces. A llowed
are single as well as double q uotes. Specified URLs may be a bsolute or relative and
when they are re la tive, they are r elative to the URL of the style sheet and not the URL
of the web page.
Here are some examples:
url(/bullets/funnybullet.gif)
url(’/bullets/another funny bullet.gif’)
url("/bullets/another funny bullet.gif")
url(http://fancybullets.com/animals/mosquito.gif)
D.2 inherit keyword
The inherit keyword is common to all CSS pr operties. With this keyword you can
force a property that isn’t normally inherited to inherit a value from the parent. For
example, if you want elements of the important class to inherit a border from their
parents, then you declare:
.important {
border: inherit;
}
Note that you cannot use the inherit keyword to inherit individual property values
through shorthand prop erties. You ca n app ly the inherit keyword to a shorthand
property only as a whole.
D.3 Text Properties
Using properties in this section you can decide h ow text should be formatted on a
web page. Most of the text properties are inherited, so it is not necessary to use them
directly with text-level elements, or elements like <h1> to <h6> or <p>. It is often
better to define an overall font, color, alignment, or similar for a page or section. For
example, you can apply font properties to a <body> or <article> element to create
a uniform overall appearance.
342 CSS Reference
CSS Reference
color (Inherited)
The color CSS property is used to set the foreground color of the element’s text
together with its decorations (e.g., under lining). This property is inherited, so the
color property applied to the document bo dy, for examp le , will also be applied to
text inside all descendants of the <body> element.
From CSS3 onwards it is possible to use transparency with text colors.
Values
Any valid <color> value.
Default Value
Depends on the browser.
Examples
color: blue;
color: #0000FF;
color: rgba(0, 0, 255, 0.5);
font (Inherited)
This is a sh orthand pr operty that sets several font p roperties in one declaration. The
following properties can be set: font-style, font-varian t, font-weight, font-
size, line-height, and font-family. The values must be separated by a space,
except font-size and line-height, which must be separ ated by a slash (/). The
font-size and font-fam ily values are required and should be the last two items in
a declaration.
Like with any shorthand property, the values that are not explicitly set revert to their
individual default values, even if they were previously set to different values using
other properties. You can find out what the default values are f rom descriptions of
respective prop erties.
Examples
font: 1.25em Arial, Helvetica, sans-serif;
font: italic small-caps bold 2em/150% Georgia, serif;
font: italic; /* Error: font-size and font-family
are missing. */
font: italic serif 18px; /* Error: font-size and font-family
are specified in wrong order. */
font-style: italic;
/* The following declaration overrides the above specified
italic style with the default one (normal): */
D.3. Text Properties 343
font: 20px Helvetica, sans-serif;
font-family (Inherited)
The font-family CSS pro perty allows you to specify the font in which the browser
will display text. It can happen that a precise font is not installed on a viewer’s
compute r—that’s why designers usually specify a list of two or more options. At
the end of the list there should always be one generic font family in case more sp e-
cific fonts are not available. In contrast to most other CSS properties, values of the
font-family property are delimited by commas to suggest that th ey are alter natives.
The browser will use the first of the fonts in the list that it finds on the computer.
Values
Any font family name can be used, such as, for example, "Helvetica" or "Courier
New". Quotes are not necessary unless names include spa ces.
The generic f ont families serif, sa ns-serif, monospace, fantasy, o r cursive
can be used. Generic names act as a fallback system: if the browser does not find any
font on the list, then it will use a gen eric font, which should always be specified last.
Generic font family names should not be q uoted because they a re keywords.
Examples
font-family: "Times New Roman", "Georgia", serif;
font-family: "Comic Sans MS", fantasy;
font-size (Inherited)
The font-size CSS property sets the size of the font—precisely the height of the
glyphs of the font. Because the actual f ont size is used for computing the value of the
em length unit, setting it may in turn aff ect the sizes of other objects.
While keywords such as xx-small or large can also be used with the font-size
property, many designers use only pixels, ems, or percentag es because the interpr eta-
tion of these keywords can vary between browsers.
Values
A positive <length> o r <percentage> value. If a relative unit or <perc entage> is used,
then th e font size is computed relative to the size of the font of the parent element.
xx-small, x-small, small , med ium, large, x-large, xx-large
Default Value
medium
344 CSS Reference
CSS Reference
Example
font-size: 2em;
font-style (Inherited)
The font-st yle CSS property permits you to selec t an italic or ob lique font. There is
a slight difference betwe en italic and obliq ue fonts in that that an italic font is normally
cursive while an oblique font is me rely a slanted version of the normal font. However,
in most browsers there is no differ ence between the values italic a nd oblique. The
normal value returns the font to its normal (roman) state.
Values
italic, oblique, normal
Default Value
normal
Example
font-style: italic;
font-variant (Inherited)
The font-variant CSS property allows a small-caps font to be selected, whic h is
all upper-case letters except tha t the letters that were originally lower c ase are smaller.
The normal value returns the font to its normal state.
Values
small-caps, normal
Default Value
normal
Example
font-variant: small-caps;
font-weight (Inherited)
The font-weight CSS pro perty allows you to make text bold. The normal value
returns the font to its normal state.
D.3. Text Properties 345
Values
bold, normal
Default Value
normal
Example
font-weight: bold;
letter-spacing (Inherited)
The letter-spacing CSS pro perty defines the space between text characters.
Values
Positive or negative <length> values are allowed that specify the amount of spac e
between char acters in addition to the initial character spacing. Therefore, specifying
a <length> value of 0 is equivalent to the normal value.
normal
Default Value
normal
Examples
letter-spacing: normal;
letter-spacing: -2px;
line-height (Inherited)
The line-hei ght CSS property adjusts line spacin g, i.e., space between lines of
text. The default value for this property is normal. Although the amount of normal
line sp acing depends on the user a gent, you can expect it to be about 1 20 percent of
the font size for desktop browsers.
Values
A positive <nu mber> value, which is multiplied by the element’s font size to get the
height of the line. T his is norma lly the preferred way of setting the line-height
property as it has no unexpected results.
A positive <length> or <percentage> value. If a relative unit or <percentage> is
used, the n line-height is computed relative to the size of the element’s font. Note
346 CSS Reference
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.