Formatting Text With Styles

Changing the Case of Text

To change the case of text...

Type: text-transform:


Type: capitalize; to put the first character of each word in uppercase.
Type: uppercase; to change all the letters to uppercase.
Type: lowercase; to change all the letters to lowercase.
Type: none; to leave the text as is.

Making Text Blink. This text is blinking because of the blink tag specified in the Styles section of the page. Internet Explorer doesn't recognize the blink tag, and therefore doesn't use it. Netscape Communicator is the only browser that recognizes the blink tag.

To make text blink, Type: text-decoration: blink;

Underlining Text. This text has been underlined, called from the P.underline tag, in the styles section. There are several different values that can be applied here...

To underline text Type: text-decoration:


Type: underline; to underline text.
Type: overline; to overline text.
Type: line-through; to put a line through the text.

Aligning Text with Styles

You can set up certain HTML tags to always be aligned, defined in the styles section of the Cascading Style Sheet. This text right here, is all aligned to be justified... There are several different values that can be applied here.

Type text-align:


Type: left; to align the text to the left.
Type: right; to align the text to the right.
Type: center; to align the text in the center.
Type: justify; to align the text in a justified setting.

Setting White Space

To set white space properties:

Type: white-space: pre; where "pre" to have browsers take all extra spaces and returns into account.
Type: nowrap; to keep all elements on the same line, except where you've inserted BR tags.
Type: normal; to treat white space as usual.

This section of text has been spaced out because of the spacing tag specified in the styles section of this page. There are many different values that can be applied to this...

To specify Tracking:


Type: word-spacing: length; where length is a numerical value in pixels, points, or ems, etc.

To specify Kerning:


Type: letter-spacing: length; where length is a numerical value in pixels, points, or ems, etc.

To add Indents:


Type: text-indent: type an absolute value (like 8pt), positive or negative, or as a percentage.

This section of text has the background changed to aqua because it was specified in the P.background section of the styles formatting section. There are several different variables that can be defined here as well.

To change the text's background:


Type: background:
Type: transparent or color, where color is a hex number, or color name.
Type: url(images/usmap.jpg) for a picture
If desired type: REPEAT to tile the image, or REPEAT-x to tile the image horizontally, REPEAT-y to tile the image vertically, or NO-REPEAT.
AND, you can type FIXED or SCROLL to determine whether the image with scroll with the canvas.

This section of text demonstrates how you can change the color of text just by specifying the color in the styles section of this page.

Type: color: "colorname" where colorname is one of 16 pre-defined colors.


Type: #rrggbb in a hexidecimal value
Type: rgb(r,g,b) where (r,g,b) specify the amount of each color to be used.
Type: rgb(r%,g%,b%) where (r%,g%,b%) specify the percenatge of each color.

This section of text demonstrates how you can literally define all the font values at once. If you look at the P.allatonce tag in the styles section, it becomes apparent.

To set all the values at once type font:


If desired type: normal, oblique, or italic to set the style.
Type: normal, bold, bolder, lighter, or multiples of 100 for weight.
Type: small-caps to use a small cap font variant.
Type: /lineheight, where lineheight is in th same form as font size.

This section of text focuses on using the line-height tag in the styles section to specify the LINE-HEIGHT of the lines of text written in this section. There are several different values that can be specified...

Type line-height: then type "N" where "N" can be any number to specify the height (relative to the size of the font being used). OR, type line-height: p%; where p% is the percentage of the font size.

Type line-height: a; where "a" is an absolute value in points, pixels, or whatever.

This section of text focuses on the size tag, in the styles section, and is specified to be a 20 point font! Please see the P.size style for this text! There are several different values that can be applied...

To create absolute font size type: font-size: xx-small font-weight: x-small font-weight: small font-weight: medium font-weight: large font-weight:x-large font-weight:xx-large

Or type relative font sizes, such as: font-weight: larger font-weight: smaller

Or type exact size, such as: font-weight: 12pt (where pt means point) font-weight: 15px (where px means pixels).

Or type a percentage RELATIVE to any particualr style, such as: font-weight: 150%

This page demonstrates creating Italics using styles. To do this the STYLE section defined the type of font and style to be used. There are several different values that can be used... For instance: you may either type font-style: oblique; for oblique looking text or font-style: italics; to to this.

This section should be formatted with bold text, because it was specified in the style tags "under." There are several different tags that can be used here: You may type font-weight: bold; font-weight: bolder; font-weight: lighter; or type multiples of 100, font-weight: 900. To remove bold formatting type font-weight: normal.

The Header: Using Font Families

This section (if everything works properly) will use the Mac OS Charcoal font. Which, of course... IT DOES!


Zak's Home Page