Cascading Style Sheets - Text, Dimension

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

Not only can you change the body tags, but you can change other features of the page. This time, let's look at text.

Changing the text is as easy as changing the backgrounds. See if this makes sense:

Example of changing font colors

<STYLE TYPE="text/css">
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</STYLE>

H1 heading

H2 heading

This is in the paragraph tags

You can also change the size of font using css. Here is an example:

With this css, we have:

H1 heading

H2 heading

This is in the paragraph tags

You can also change the size of font using css. Here is an example:

<STYLE TYPE="text/css">
h1 {font-style: italic}
h2 {font-style: normal}
p {font-style: oblique}
</STYLE>

I'm not sure what oblique means.

With this css, we have:

H1 heading

H2 heading

This is in the paragraph tags

You can also change the capitalization of a font using css. Here is an example:

<STYLE TYPE="text/css">
p.normal {font-variant: normal}
p.small {font-variant: small-caps}
</STYLE>

Then when you're making paragraphs, you would say
<p class="normal">This is normal</p>
<p class="small">This is small caps</p>

With this css, we have:

This is normal

This is small caps

Want an different font entirely? Here's how you can do it.

<STYLE TYPE="text/css">
h3 {font-family: times}
p.courier {font-family: courier}
p.sansserif {font-family: sans-serif}
</STYLE>

Then when you're making paragraphs, you would say
<h3>This is H3 in Times</h3>>
<p class="courier">This is Courier</p>
<p class="sansserif">This is Sans Serif</p>

With this css, we have:

This is H3 in Times

This is Courier

This is Sans Serif

All of these can be used at once, or combined into new combinations. For example, perhaps you want a page where the H1 headings are in Courier with red, italic writing. You also want all paragraphs to be purple and Times in small caps. (This would make for a VERY ugly page.) Here's how you'd do that:

<STYLE TYPE="text/css">
h1 {font-family: courier; font-style: italic; color: #ff0000}
p {font-family: times; font-variant: small-caps; color: "purple"}
</STYLE>

With this css, we have:

H1 Heading

This is the paragraph

One more quick thing. You can use css to "double space" you page. It will increase spacing or decrease spacing between lines, if you know the code.

Let's make our first paragraph with large spaces, and the second with small spaces between lines.

<STYLE TYPE="text/css">
p.increase {line-height: 1cm}
p.decrease {line-height: 0.2cm}
</STYLE>
Note that the classes are called increase and decrease. You'll type: <p class="increase"> or <p class="decrease"> to put your paragraphs in.

This is the paragraph with the class called "increase." I have to make it at least two or three lines long or the spacing won't matter.

This is the paragraph with the class called "decrease." I have to make it at least two or three lines long or the spacing won't matter.