Cascading Style Sheets - Font +

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
Section 4 - Advanced
      Fancy Lists
      Forms
      Advanced Tables
      Frames
      Style Sheets
         Type and possibilities
         Background
         Text, Dimension
         Font
         Border
         Padding, list
         Classification
         Positioning
         Hyperlinks
         Misc.
         Multiple CSS
         You try it
      Image Maps
Section 5 - Publishing
Section 6 - Extras
Appendices

Truthfully, some of the font and text tags got mixed up, so this section, even though called fonts, has more to do with texts. Oh well.

One thing you can do with css is to change the spacing between letters. Spacing can either be done in pixels or centimeters. We'll look at two different spacings. The first makes the letters closer together by three pixels, and the second spaces them further apart.

<STYLE TYPE="text/css">
h3 {letter-spacing: -3px}
h4 {letter-spacing: 0.5cm}
</STYLE>

H3 Heading

H4 Heading

You can also change the alignment of text using css. Here is an example:

<STYLE TYPE="text/css">
p {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</STYLE>

With this css, we have:

H3 heading

H2 heading

This is in the paragraph tags

You can also change the decoration of the text using css. Here is an example:

<STYLE TYPE="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
a {text-decoration: none}
</STYLE>

I'm not sure what oblique means.

With this css, we have:

H1 heading

H2 heading

H3 heading

This is an anchor

Have you ever been frustrated with attempts at indenting on the internet? You can do it with css:

<STYLE TYPE="text/css">
p {text-indent: 1cm}
</STYLE>

With this css, we have:

This is my paragraph. I didn't have to do anything special to get it to indent. I just keep typing and the paragraph indents naturally.

Here is another one. Now you can see that the paragraphs are really easy to make when you use css.

You can trick whole paragraphs to be upper-case, lower-case, or to have every word capitalized. Here's how you can do it.

<STYLE TYPE="text/css">
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</STYLE>

Make sure when you use the <p> tag you add the class, for example, <p class="uppercase">

With this css, we have:

This is an example of uppercase.

This is an example of lowercase.

This is an example of capitalize.

This page relied heavily on W3schools.com