Web : Tao [ Volume. 1 ]

Fonts and Text

Setting The Font
To set the font(s) for your document, you would use the "font-family" property. Let's say we had a document, and on it we wanted all h1 headers to be Verdana, then everything else to be Courier New, this is what the CSS document would look like:

body {
font-family : "courier new";
}
h1 {
font-family : verdana;
}

But why did I use "body" for the selector? Why not "p", or "font" or some other tag? Well, if you stylize the body, then you will stylize everything contained within the body tags. Therefore, all fonts will be Courier New, unless otherwise specified (as with the h1 selector).
If I were to place that CSS directly on my web page, it would look like this:

<html>
<head>
<title>TITLE HERE</title>
<style type="text/css">

</style>
</head>
<body>
<h1>A Header Here</h1>
And a bunch of information and text and what not here.
</body>
</html>

You'll notice that I enclosed Courier New within quotations, but not verdana. All fonts with more then one word in the name must be enclosed within quotations.
The one thing about specifying fonts is you never know if the visitor will have that font (Check out the Font Face Guide to help increase your chances). Therefore, it's always wise to specify multible fonts. That way, if the visitor does not have the first choice, the computer will move on to the next one. If the computer cannot find any of the fonts, then they get to see the default, usally Times New Roman. But, let's say that you have all your fonts set to a bunch of sans-serif fonts like Helvetica, and Arial. You may not want your fonts to be replaced with a serif font like Times New Roman. In that case, you would specify all your desired fonts, and then the type style. For example, you would type font-family : verdana, tahoma, "trebuchet ms", sans-serif;

The different type styles are: serif (times new roman; anything with little "feet"), sans-serif (arial; anything without the little "feet"), monospace (Courier New, monospaced means that each letter occupies the same amount of space), cursive (Apple Chancery), and fantasy (wingdings).

With that said, let's say we wanted our headers to be impact, or anything sans-serif, we wanted all the text enclosed within <td> tags to be verdana, arial, or anything sans-serif, and we wanted any other text to be courier new, or anything monospace, we would make this:

body {
font-family : "courier new", monospace;
}
h1 {
font-family : impact, sans-serif;
}
td {
font-family : verdana, arial, sans-serif;
}

Setting The Font Size
With HTML you get to choose between 7 sizes. 1, 2, 3, 4, 5, 6, and 7. Pretty.... limited. With CSS however, not only can you pick the size, you can choose from a variety of measurements, or even percentages.

Before I discuss different font sizing techniques, you need to understand parent elements, and different types of measurements.

Inheriting Properties From A Parent
All <html> tags except the <body> tags can have a parent, or a container tag that surrounds the tag.

For example, let's say we had this document:

<html><head><title> [TITLE] </title></head>
<body>
<p>
A paragraph here, <i>With some italic text here</i>
</p>
</body>
</html>

The <p> and <i> tag inherit the properties of the <body> tag, and can also override them (for text contained within), the <i> tag inherits the properties of the <p> and <body> tag, but can also override them for text contained within.

CSS Measurements
Length values can be one of two types with CSS; relative, and absolute.

Relative Length Values
Name	Type	Description	Example
em	em dash	Width of the letter M for that font	5em
ex	x-height	Height of the lowercase x of that font	4ex
px	pixel	Based on monitor's resolution	30px
Absolute Length Values
Name	Type	Description	Example
pt	point	used to describe font size. 1pt = 1 / 72 of an inch	5pt
pc	picas	used to describe font size, 1pc ~ 12pt	13pc
mm	Millimeters	-	25mm
cm	Centimeters	-	8.2cm
in	Inches	1 inch = 2.54 cm	4.43in

Pixel sizes have the most stability between operating systems.

Now that you know that, I can show you how to size a font. If I wanted all the text on my web page/site to be 12 pixels, verdana I would make my CSS look like this:

body {
font-family : verdana;
font-size : 12px;
}

When you set the font size, it can have a variety of values:
Length Units: this can be an absolute, or relative value, measured like the above specifications.
Absolute Expression: this describes the font size. Possible values can be: xx-small, x-small, small, medium, large, x-large, and xx-large. Example: font-size : x-large; .
Smaller or Larger: describes the font in relation to the parent. Example: font-size : larger; .
Percentage: describes the font in proportion to the size of its parent element. Example: font-size : 23%; .

Font Styles
With font styles you can specify italic, or oblique. Oblique fonts are simply slanted to the right by the computer, italic fonts are completely redesigned making the serifs more pronounced, in addition to slanted it to the right.

To define the font style as italic or oblique you set up the CSS like this:

p {
font-style : oblique;
}

The p selector can be any html tag, such as the body tag. And don't forget the different ways to type a selector; refer to the Introduction to CSS.
In this instance, the above CSS will render all text contained within the <p> and </p> tags oblique.

Font Weights
With CSS you can specify more then just "bold", you can specify:
bold
lighter
bolder
100 - 900

Font Weight numbers need to be in increments of 100. This value will increase the weight of the text, based on alternative versions of the font that are available.

To specify the font weight, you would do it like this:

h2 {
font-weight : bolder;
}

This will render all h2 tags bolder, relative to the parent element's weight.

Adjusting Kerning, Tracking, and Leading
With CSS, you can use the measurement types (px, pc, pt, etc) listed earlier to adjust the kerning (space between each letter), tracking (the space between each word), and leading (space between each line of text).

To adjust the Kerning, you would type { letter-spacing : value; }, for example, let's say I had a document, and I wanted all the text enclosed within <p> tags to have a space of 8px between each letter. I would type my style sheet like this:

p {
letter-spacing: 8px;
}

To adjust the Tracking, you type { word-spacing: value; }, for example, if I wanted all text on my document to have a space of -7px in between each word you would type this:

body {
word-spacing: -7px;
}

To adjust the leading, you type { line-height: value; }, Example:

.moreheight {
line-height: 12pt;
}

Your values can be a length, measured in px, pt, pc, etc., a number like 5 or 8, or a percentage.

Text Case
You can also use CSS to make a body of text all capital, lowercase, or even setting it up so only the first letter of each word will be uppercase.

To do this you use the text-transform property, and set the value to either "capitalize", "uppercase", or "lowercase".

For example, let's say you wanted your links to be normal, except when you hovered over them, in which case you wanted all letters to be uppercase. You could type this:

a {
text-transform: normal;
}
a:hover {
text-transform: uppercase;
}

Capitalize sets the first letter of each word in uppercase, uppercase makes all letters capital, lowercase makes all letters lowercase, and normal makes text normal.

Alignment
You can use the text-align property to set text to left, right, center, or justify.

For Example, let's say I made this document:

<html>
<head>
<title>TITLE HERE</title>
<style type="text/css">

</style>
</head>
<body>
<p class="lefty">
All text here is to the left!
</p>
<p class="righty">
All text here is to the right!
</p>
<p class="center">
This text is in the center!
</p>
<p class="just">
This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified! This text will be justified!
</p>
</body>
</html>

That above code would make this.

Aligning Text Vertically
The vertical-align property can be set to super, sub, baseline, top, middle, bottom, text-top, text-bottom, or a percentage.

Indenting Paragraphs
While there is no easy way to indent a paragraph with strait html, aside from making a seris of space character entitys (the  ) You can easily use CSS to indent paragraphs using the text-indent property in the p selctor, and setting the value to a length like 5px, or a percentage, like 10%.

For example, this web page has indents, using the above method. This is the HTML for that document:

<html>
<head>
<title>Sleep</title>
<style type="text/css">

</style>
</head>
<body bgcolor="#000000" text="#CCCCCC">
<font face="verdana">
<h1>Sleep</h1>
<p>
Sleep, natural state of rest characterized by reduced body.....
</p>
<p>
In the 1950s American physiologists Eugene Aserinsky and.....
</p>
<p>
Sleep research shows that certain regions of the brain play.....
</p>
<hr size="2" noshade noshade="noshade" color="#990000" />
<small>
"Sleep," Microsoft® Encarta® Encyclopedia 2000. © 1993-1999 Microsoft Corporation. All rights reserved.
</small>
</font>
</body>
</html>

Decorating Text
Using the text-decoration property, you can set the value to none, underline, overline, line-through, and blink.

The most common usage for setting the text-decoration to none is for removing the underlines from links.

a {
text-decoration: none;
}

And yes, you can have more then one text-decoration.

a {
text-decoration: underline overline;
}

Page Breaks And Printing
With the page-break-before/after property you can set up material to print on separate pages. However, you have to set this property physically in the tag, with the style attribute.

When you set the page-break-before/after property, you need to set the value to either always or auto. Always will force a page break before the element, auto allows the browser to place the page break.

For example, you could have a body of text like this:

...this text will print on page one,
<p style=" page-break-before: always; ">
But this text will print on page two.
</p>

page-break-after means that a page break will happen directly after the tag.

Main?