font-family
property:
p { font-family: Verdana; }
p { font-family: sans-serif; }Now, you will probably want more control than this over the way your site displays—and you can. It’s possible to specify both font names and generic fonts in the same declaration block. Take, for example, the following style rule for the
p
element:
p { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }Here, we’ve specified that if Verdana is installed on the system, it should be used; otherwise, the browser is instructed to see if Geneva is installed; failing that, the computer will look for Arial, then Helvetica. If none of these fonts are available, the browser will then use that system’s default sans-serif font. If a font-family name contains spaces, it should be enclosed in quotation marks, like so:
p { font-family: "Courier New", "Andale Mono", monospace; }The generic font-family names should always be without quotes and appear last in the list. The list of fonts is often termed a “font stack,” which is a good term to search on if you’re looking for information on fonts to use in this way. Fonts that you can feel fairly confident using are:
font-size
property, like so:
font-size: 12px;
font-size
property can take a variety of values.
Before you decide which to use, you should know the relative merits of
each option.
Table 2.1 identifies the units that you
can use to size fonts.
Table 2.1. Units of measurement for sizing fonts
Unit Identifier | Corresponding Units |
---|---|
pt | points |
pc | picas |
px | pixels |
em | ems |
ex | exes |
% | percentages |
p {
font-size: 10pt;
}
A point has a fixed size of 1/72nd of an inch, while a pica
is one-sixth of an inch. A printed document whose fonts are specified
using these units will appear exactly as you intended; after all,
one-sixth of an inch is the same physical measurement whether you’re
printing on an A4 page or a billboard. However, computers are unable
to accurately predict the physical size at which elements will appear
on the monitor, so they guess—and guess badly—at the size of a point
or pica, with results that vary between platforms.
If you’re creating a print stylesheet (as we do in the section called “How do I create a print stylesheet?
” in Chapter 9) or a document that’s intended for
print—rather than on screen—viewing, points and picas are the units to
use. However, as a general rule of thumb we should avoid them when
designing for the Web.
p {
font-size: 12px;
}
Using pixels makes it easy to achieve consistent text
displays across various browsers and platforms. However, pixel
measurements ignore any preferences users may have set in their own
browsers; furthermore, in the case of
Internet Explorer, font sizes that the designer has
dictated in pixels cannot to be resized by users. This limitation
presents a serious accessibility problem for users who need to make
text larger in order to read it clearly.
While pixel measurements may seem like the easiest option for
setting font sizes, they should be avoided if another method can be
used. Even if you disregard the text resizing issue, given that many
users will use page zoom rather than resize the text, using scalable
font sizes will make your life far easier once you venture into modern
layout techniques (we’ll discuss these later in the book). If you’re
creating a document for print or creating a print stylesheet, you
should avoid pixels entirely. Pixels have no meaning in the world of
print and, like the application of points to the on-screen
environment, when print applications are provided with a pixel
measurement, they’ll simply try to guess the size at which the font
should appear on paper—with erratic results.
p {
font-size: 0.9em;
}
To display the text 10% larger than the default or inherited
size, you’d use this rule:
p { font-size: 1.1em; }
p {
font-size: 100%;
}
Setting the size of a p
element to 100% will display your text at users’ default font-size
settings (as will setting the font size to 1 em). Decreasing the
percentage will make the text smaller:
p { font-size: 90%; }Increasing the percentage will make the text larger:
p { font-size: 150%; }
x-small
-sized text may be perfectly
readable in one browser and minuscule in another. Due to this lack
of control, you rarely see these keywords in use.
larger
and
smaller
—takes its size from the
parent element in the same way that text sized with em and % does.
Therefore, if you set the size of your p
element to small
using absolute keywords and decide that you want emphasized text to
display comparatively larger, you could add the following to the
stylesheet:
The following markup would display as shown in Figure 2.1, because the text between the
<em>
and </em>
tags will display larger than its parent, the p
element:
<p>Garlic may be known for being a little bit <em>stinky</em>, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.</p>
<div> <p> You'll <em>probably</em> be surprised when using <a href="#">a relative <code>font-size</code></a> and nested elements. </p> </div>
font-size
of
the markup text to 130% of the default size, and we made the mistake of
setting it this way:
The effect of this style rule is to make the
font-size
of the nested elements progressively
bigger; that’s 130% of the font-size
of the parent
element, which is already 130% of the font-size
of
its parent and so on, as demonstrated in Figure 2.2.
text-decoration
property to remove
the underlines from link text. By default, the browser will set the
text-decoration
property of all elements to
underline
. To remove the underline, simply set the
text-decoration
property for the link to
none
:
text-decoration: none;The CSS used to create the effect shown in Figure 2.3 is as follows:
underline
and
none
, there are other values for
text-decoration
that you can try out:
It is possible to combine these values. For instance, should you
wish to have an underline
and
overline
on a particular link—as illustrated in Figure 2.4—you’d use this style rule:
text-decoration
property to
apply underlines to any text, even if it’s standard unlinked text, but
be wary of doing this. The underlining of links is so widely accepted
that users are inclined to think that any underlined text is a link to
another document.
:hover
and
:active
dynamic pseudo-classes of the
anchor element differently from its other pseudo-classes.
Let’s look at an example. Here’s a typical style rule that applies
the same declarations to all of an anchor element’s
pseudo-classes:
a:link, a:visited, a:hover, a:active { text-decoration: underline; color: #6A5ACD; background-color: transparent; }
#6A5ACD
with an underline, as shown in
Figure 2.5.
To style our :hover
and
:active
pseudo-classes differently, we need to remove
them from the declaration with the other pseudo-classes and give them
their own separate declaration. In the CSS below, I decided to remove
the underline on hover. I’ve also set a background color and made the
link’s text a darker color; Figure 2.6 shows how
these styles display in a browser:
As you’ve probably realized, you can style the anchor’s other
pseudo-classes separately, too. In particular, you might like to apply a
different style to links that users have visited. To do so, you’d simply
style the
:visited
pseudo-class
separately.
When styling pseudo-classes, take care that you leave the size or
weight (or boldness) of the text unchanged. Otherwise, you’ll find that
your page appears to jiggle, as the surrounding content has to move to
make way for the larger text to display when your cursor hovers over the
link.
:link
, :visited
,
:hover
, :active
, or else you may
find that they work differently to how you intended. One way to remember
this order is by using the mnemonic: LoVeHAte.
a:link, a:visited { text-decoration: underline; color: #6A5ACD; background-color: transparent; } a:hover, a:active { text-decoration: underline overline; color: #191970; background-color: #C9C3ED; }
class
or an id
for the element that will
contain the differently colored links. If the container is already
styled with CSS, it may already have a class
or id
that we can use. Suppose that our
document contains the following markup:
<div class="boxout"> <p>Visit our <a href="#store">online store</a>, for many of the tools you need to kit out your kitchen.</p> </div>
class
boxout
:
.boxout { color: #FFFFFF; background-color: #6A5ACD; … } .boxout a:link, .boxout a:visited { text-decoration: underline; color: #E4E2F6; background-color: transparent; } .boxout a:hover, .boxout a:active { background-color: #C9C3ED; color: #191970; text-decoration: none; }
div
element with the class
boxout
: these links will be displayed in the
lighter color.
class
to the first item, and
then style that class
uniquely from
other items; however, there’s a more elegant way to create this effect
using the pseudo-class selector
first-child
.
<ul> <li>Brie</li> <li>Cheddar</li> <li>Red Leicester</li> <li>Shropshire Blue</li> </ul>
first-child
selector. This allows us to target the first element within the ul
element, as shown in Figure 2.8:
first-child
pseudo-class selector is well
supported in browsers as it has existed since the CSS2.1 specification.
The only browser you’re likely to be concerned about without support is
IE6. See Chapter 7 for
suggestions as to how to manage this lack of support.
h1 {
background-color: #ADD8E6;
color: #256579;
font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 0.2em;
}
text-decoration
property that we
encountered earlier in the section called “How do I remove underlines from my links?
” This
method will allow you to apply to text an underline that’s the same
color as the text itself, as this code and Figure 2.10, show:
h1 {
font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: underline;
}
text-decoration
property. Here’s the style rule
you’ll need:
h1 {
font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 0.2em;
border-bottom: 1px solid #AAAAAA;
}
h1
, rather than
the level-one heading itself:
h1 {
font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-bottom: 0;
}
h1+p {
margin-top: 0;
}
h1
no longer has a top margin; all
subsequent paragraphs, however, retain their top margins.
span
tags and add a class
attribute, you can easily add a CSS
rule for that class
. For example,
in the following paragraph, we’ve wrapped a phrase in span
tags that apply the class
hilite
:
<p>Garlic may be known for being a little bit <span class="hilite"> stinky</span>, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.</p>
hilite
class is
shown below; the highlighted section will display as seen in Figure 2.14:
em
(for emphasis) or
strong
instead, and
then style the em
or strong
element. By using em
or strong
, you affect the meaning of the
document. In such cases where highlighting is for looks only and no
additional semantic elements are required, the technique explained
here is the best one to use.
font
tags is that it gave
you far more control over the way text looked on the page. In this
solution, we’ll alter the leading of the text in your document.
line-height
property:
p {
font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
line-height: 2.2;
}
line-height
using standard CSS units of
measurement, such as ems or pixels, but doing so breaks the link
between the line height and the font size for child elements. For
instance, if this example contained a span
that set a large
font-size
, the line height would scale up
proportionally and maintain the same ratio, because the
line-height
of the paragraph was set to the
numerical value 2.2. If, however, the line-height
was set to 2.2em or 220%, the span
would inherit the actual line height instead of the ratio, and the
large font size would have no effect on the line height of the
span
. Depending on the effect
you’re going for, this may actually be a desirable result.
text-align
property, like so:
text-align
are:
right
: aligns the text to the right of the
container
left
: aligns the text to the left of the
container
center
: centers the text in the
container
text-align
text-align
is
left
for languages that are read from left to right
(such as English and French) and right
for
languages that are read right to left (Hebrew or Arabic). If no
text-align
value is set, the text will be
displayed depending on the text direction of the language the site is being viewed
in. If your site has to support bidirectional text flowed into the
same templates, take care to test text-align
in
both language directions.
padding-left
value, for example:
<p class="indent">Garlic may be known for being a little bit <span class="hilite">stinky</span>, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.</p>
blockquote
to indent
text unless the text is actually a quote. This bad habit was a technique
encouraged in the past by visual editing environments such as
Dreamweaver, which played on the fact that a browser’s default
stylesheet usually indents a blockquote
. Some WYSIWYG (What You See Is What
You Get) editors used in content management systems also do this. If
you’re currently using an editor that employs blockquote
tags to indent text, you should
resist the temptation to use it for this purpose; instead, set up a CSS
rule to indent the appropriate blocks as just shown.
The blockquote
tag is designed
to mark up a quote, and devices such as screen readers used by visually
impaired people will read this text in a way that helps them understand
that it’s a quote. Hence, using blockquote
to indent regular paragraphs will
be very confusing for such users.
text-align
property.
text-align
property, give it a value of center
:
The result of this rule can be seen in Figure 2.19.
text-transform
property:
Note the uppercase text in Figure 2.20.
text-transform
property has other useful
values. The value capitalize
will capitalize the
first letter of each word, as illustrated in Figure 2.21. This is very useful for transforming
headings when text is being entered via a CMS. Users are unlikely to
remember to capitalize everything correctly, but with CSS you can ensure
that text will display neatly, regardless of what has been entered. You
should be aware, however, that words such as “a” and “the” will also be
capitalized.
The other values that the text-transform
property can take are:
lowercase
none
first-letter
pseudo-class selector:
<h1>Baked Garlic</h1> <p>Garlic may be known for being a little bit <em>stinky</em>, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.</p>
first-letter
. I’ve also used an adjacent
selector to only target the paragraph that comes directly after an
h1
; without this, the first letter of
every paragraph would have a drop cap. Because browsers interpret
line-height
differently, the results can be a
little inconsistent, so you’ll need to experiment a little for a
pleasing effect.
There is a useful article by James Edwards on the SitePoint website that discusses
creating a
drop-caps effect in some detail.
text-shadow
property lets you add
shadows to text—from the subtle to the completely crazy:
<h1>Baked Garlic</h1> <p>Garlic may be known for being a little bit <em>stinky</em>, but baked it is absolutely delicious and as long as you feed it to all of your guests no-one will complain about the smell! Once baked the garlic becomes creamy and sweet making an ideal spread to accompany cheese.</p>
text-shadow
property is
straightforward:
text-shadow: 5px, 5px, 5px, #999;The first value is the horizontal distance from the text; the second is the vertical distance; the third is the blur radius or spread of the shadow; and the final value is the color. The easiest way to see how
text-shadow
works is to create a large heading
—so you can easily see your
changes—and then play around with the values. You can also have a play
around with text-shadow
and many other CSS3
properties at the online
CSS3
Generator.
text-shadow
most useful when
adding effects to form buttons and big headings, but large quantities
of body copy can be hard to read with a shadow applied. Sadly, the
text-shadow
property is unsupported in Internet Explorer (including version 9). We’ll discuss
this further in Chapter 7, where we’ll
cover ways of dealing with it.
list-style-type
property. First,
here’s the markup for the list:
<ul> <li>Brie</li> <li>Cheddar</li> <li>Red Leicester</li> <li>Shropshire Blue</li> </ul>
list-style-type
property to square:
list-style-type
property can take are
disc
, circle
,
decimal-leading-zero
, decimal
,
lower-roman
, upper-roman
,
lower-alpha
, upper-alpha
, and
none
.
You’ll find that some of these values have no support in certain
browsers; those browsers without support for a particular bullet type
will display the default type instead. You can see the different types,
and check the support your browser has for them, at the CSS Test
Suite for list-style-type. Setting
list-style-type
to none
will
remove bullets from the display, although the list will still be
indented as if the bullets were there, as Figure 2.25 shows:
ul { list-style-type: none; }
list-style-image
property to set your
bullets rather than list-style-type
. This property
accepts a URL, which can incorporate the path to your image file as a
value:
Figure 2.26 shows how this effect can be
used to spruce up a list.
list-style-image
property applies to
the list item (li
) elements in the
list. But if you apply list-style-image
to the
list as a whole (the ul
or ol
element), each individual list item will
inherit it. You do, however, have the option of setting the property
on individual list items by assigning a class
or id
to each, giving individual items their
own unique bullet images.
If turning the bullet into an image is falling short of the
desired result, your other option would be to use a background image,
which we’ll discuss in Chapter 3.
list-style-type
to
none
, you may also wish to remove or decrease the
default left-hand margin that the browser sets on a list.
display
property of the li
element to inline
, like
so:
<ul class="nav"> <li><a href="#breakfast">Breakfast recipes</a></li> <li><a href="#lunch">Lunch recipes</a></li> <li><a href="#dinner">Dinner recipes</a></li> </ul>
body
element:
body { margin: 0; padding: 0; }The result is shown in Figure 2.29.
*
)—to remove the margins and padding
from everything, a technique known as performing a global
whitespace reset. If you’re working on a particularly
complex design, this may be the best way to start.
Once you’ve done this, though, you’ll need to go back and add
margins and padding to every element you use. This is particularly
important for some form elements, which may be rendered unusable by this
style rule.
For simpler designs, removing the whitespace from every element is
usually overkill, and simply generates more work; you’ll need to go back
and add padding and margins to elements such as paragraphs, blockquotes,
and lists. A viable alternative is to remove the margins and padding
from a select set of elements only. The following style rule shows how
this works, removing whitespace from heading and list elements:
h1, h2, h3, h4, h5, h6, ul, ol { margin: 0; padding: 0; }There has been much discussion in the web development community over whether CSS Resets are a good idea or not. Personally, I don’t use them, instead preferring to perform a similar method to what we’ve just seen, depending on the project. If you do find them helpful, I’d suggest looking at Eric Meyer’s CSS Reset as a solid starting point.
font-family
at the beginning
of this chapter, I mentioned that you have to be careful about selecting
fonts, as there are only a few fonts that you can safely assume are on
most users’ computers. However, CSS provides a way to use other fonts,
too, by loading a font file from the server.
font-face
property:
@font-face { font-family: KaffeesatzBold; src: url(YanoneKaffeesatz-Bold.ttf); } h1 { font-family: KaffeesatzBold, sans-serif; font-weight: normal; }The
@font-face
rule declares the name of the
font, then enables you to load in a font file that’s on your server with
the
src
property. You can then just use
this font in your font-family
list as you would any
other font.
@font-face
currently. The first is that no single font format is supported across
all browsers and operating systems; therefore, importing a font is a
little more complicated than just loading in a single file as in the
preceding example.
The second issue is licensing. Many of the fonts that you
might use in Photoshop on your own computer aren’t licensed to be
uploaded to a web server and served in this way, as other users could
download the font file itself—just as they can download an image that
you’re using on your website.
@font-face
generator
that will create your set of fonts from one that you upload. Upload
your font, and you can then download a package of various font types
along with the CSS rules needed to include them in your site:
@font-face { font-family: 'YanoneKaffeesatzBold'; src: url('yanonekaffeesatz-bold-webfont.eot'), src: url('yanonekaffeesatz-bold-webfont.eot?#iefix') format('embedded-opentype'), url('yanonekaffeesatz-bold-webfont.woff') format('woff'), url('yanonekaffeesatz-bold-webfont.ttf') format('truetype'), url('yanonekaffeesatz-bold-webfont.svg#YanoneKaffeesatzBold') format('svg'), font-weight: normal; font-style: normal; }
52.15.56.12