HTML and CSS Reference
In-Depth Information
CSS gives you lots of control over the look of your
fonts, including properties like font-family, font-
weight, font-size, and font-style.
Use the font size keywords to set the base font
size in your body rule, so that all browsers can
scale the font sizes if users want the text to be
bigger or smaller.
A font-family is a set of fonts that share common
characteristics.
You can make your text bold using the font-weight
CSS property.
The font families for the Web are serif, sans-serif,
monospace, cursive, and fantasy. Serif and sans-
serif fonts are most common.
The font-style property is used to create italic or
oblique text. Italic and oblique text is slanted.
The fonts that your visitors will see in your web
page depend on the fonts they have installed on
their own computers, unless you use Web Fonts.
Web colors are created by mixing different
amounts of red, green, and blue.
If you mix 100% red, 100% green, and 100% blue,
you will get white.
It's a good idea to specify font alternatives in your
font-family CSS property in case your users don't
have your preferred font installed.
If you mix 0% red, 0% green, and 0% blue, you will
get black.
Always make the last font a generic font like serif
or sans-serif, so that the browser can make an
appropriate substitution if no other fonts are found.
CSS has 16 basic colors, including black, white,
red, blue, and green, and 150 extended colors.
You can specify which color you want using
percentages of red, green, and blue, using
numerical values of 0-255 for red, green, and blue,
or using a color's hex code.
To use a font that your users may not have
installed by default, use the @font-face rule in
CSS.
Font sizes are usually specified using px, em, %,
or keywords.
An easy way to find the hex code of a color you
want is to use a photo editing application's color
picker or one of many online web tools.
If you use pixels (“px”) to specify your font size,
you are telling the browser how many pixels tall to
make your letters.
Hex codes representing colors have six digits,
and each digit can be from 0-F. The first two digits
represent the amount of red, the second two the
amount of green, and the last two the amount of
blue.
em and % are relative font sizes, so specifying
your font size using em and % means the size of
the letters will be relative to the font size of the
parent element.
You can use the text-decoration property to create
an underline for text. Underlined text is often
confused as linked text by users, so use this
property carefully.
Using relative sizes for your fonts can make your
pages more maintainable.
