HTML and CSS Reference
In-Depth Information
The only property we need to set the color of text is the
color
property. The
color
prop-
erty accepts one color value, but in many different formats. These formats, as we discussed
in
Lesson 3
, “
Getting to Know CSS
,
” include keywords, hexadecimal values, and RGB,
RGBa, HSL, and HSLa values. Hexadecimal values are the most prevalent, as they provide
the most control with the least amount of effort.
Let's take a look at the CSS required to change the color of all the text within the
<html>
element on a page:
1.
html {
2.
color: #555;
3.
}
Changing Font Properties
CSS offers a lot of different properties for editing the look and feel of text on a page. These
properties fit into two categories: font-based properties and text-based properties. Most of
these properties will be prefaced with either
font-*
or
text-*
. To begin we'll discuss
the font-based properties.
Font Family
The
font-family
property is used to declare which font—as well as which fallback or
substitute fonts—should be used to display text. The value of the
font-family
property
contains multiple font names, all comma separated.
The first declared font, starting from the left, is the primary font choice. Should the first
font be unavailable, alternative fonts are declared after it in order of preference from left to
right.
Font names consisting of two or more words need to be wrapped in quotation marks. Ad-
ditionally, the last font should be a keyword value, which will use the system default font
for the specified type, most commonly either
sans-serif
or
serif
.
The
font-family
property in action looks like this:
1.
body {
2.
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
3.
}
In this case,
Helvetica Neue
is the preferred font to display. If this font is unavailable
or not installed on a given device, the next font in the list—Helvetica—will be used, and so
on.
Search WWH ::
Custom Search