980px
1
body { font-family: Arial, Helvetica, sans-serif; color: #85898A; }

In this CSS Rule example we are setting a font-family for the entire page by way of the body selector.

The font-family property calls three values to choose from and try to load:

  1. Arial
  2. Helvetica (if Arial is not available)
  3. a default sans-serif (if both Arial & Helvetica are not available)

It is important to use a generic fall-back when specifying fonts because the specified font may not be available on everyone’s computer.

2. Font-Size

You have three types of font-size values to choose from:

Absolute: values that come in a fixed or absolute size; pixels

Select Code
1
2
3
4
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}

Keyword: values that will be displayed based on their inherit settings; small, large, xx-large:

Select Code
1
2
3
4
p {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}

Relative: values that are relative to the page or browser settings; percentages, ems

When working with relative units, one must set the baseline size which all relative units will then adhere to

Select Code
1
2
3
4
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
}

By declaring your font-size as 100% you are saying that your baseline size will be 100% of the default baseline size. Since 16 points is the default baseline size, 100% of 16 points is what all relative units will adhere to as the default baseline size.

Select Code
1
h1 { font-size: .8em; }

In this example we are declaring that .8em will be 80% of 16 points – you do the math.

3. Font-Style

Font-Style determines whether a font is set to be italicized or not:

Select Code
1
h1 { font-style: italic; }

In this example we have set the headline to display as italic or oblique (which makes the typeface lean a bit) or normal (which makes the typeface stand up-right.

4. Font-Weight

Font-Weight determines the weight or boldness of the typeface:

Select Code
1
h1 { font-weight: normal; }

Since headlines are bold by default you can override the bold setting by using normal, as in this example.

Other possible value include: 100-900, bold, bolder, lighter.

5. Font-Variant

Font-Variant determines whether the typeface will be displayed as lowercase or small caps:

Select Code
1
h1 { font-variant: small-caps; }

By using normal, the text will be displayed in lowercase (if written that way).

Text Properties

CSS text properties defines the text indent, spacing, alignment and decoration of a piece text.

See Also: Styling Text | W3 Schools

1. Text-Indent

Text-Indent uses numerical values to give the first line of paragraph text an indent:

Select Code
1
p { text-indent: 3em; }

2. Letter-Spacing

Letter-spacing uses numerical values to give space in-between letter pairs of text:

Select Code
1
p { letter-spacing: .2em; }

3. Word-Spacing

Word-spacing uses numerical values to give space in-between word pairs of text:

Select Code
1
p { word-spacing: .2em; }

4. Text-Decoration

Text-decoration uses keyword values to give text a decorative style:

Select Code
1
p { text-decoration: underline; }

5. Text-Align

Text-align uses keyword values to align the text of any block level tag:

Select Code
1
p { text-align: left; }

6. Line-Height

Line-height uses numerical values to give space between lines of text:

Select Code
1
p { line-height: 18px; }

7. Text-Transform

Text-transform uses keyword values will change the capitalization of text within an element:

Select Code
1
p { text-transform: capitalize; }

8. Vertical-Align

Vertical-align uses length and keyword values to move type up or down with respect to the baseline:

Select Code
1
p { vertical-align: 60%; }

Using Text Classes

Classes can be used in special circumstances when the normal hierarchy of the cascade will not do:

Select Code
1
p.footer { font-size: 10px; line-height: 14px; margin-top: 25px; }

A class selector is preceded by using a (.).

In this example, the class must be within the <p> tag.

A contextual selector, such as the <a> tag, may be used in a class:

Select Code
1
p.footer a { font-style: italic; color:#F20017; }
Select Code
1
<p class="footer"><a href="mailto:info@premiumdw.com">info@premiumdw.com</a></p>

To specify the class in your markup you must use the class attribute and specify its value; in this case, class=”footer”

This portion of the Premium Design Works website is written by Mike Sinkula for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.

Leave a Comment:

Don't forget to get your Globally Recognized Avatar.

css.php