CSS is a much more powerful tool than HTML when it comes to formatting. This tutorial will be looking mostly at formatting text but it doesn’t mean they only work with text. Later tutorials like “Layout with Styles” will continue with more CSS formatting options. To be honest, this tutorial is best for reference, you will be using a lot of these format styles so often they will become second nature.

Here is a list of the topics we will be covering in this tutorial:

Choosing a Font Family
Specifying Alternate Fonts
Creating Italics
Applying Bold Formatting
Setting the Font Size
Setting the Line Height
Setting All Font Values at Once
Setting the Color
Changing the Text’s Background
Controlling Spacing
Adding Indents
Setting White Space Properties
Aligning Text
Changing the Text Case
Using Small Caps
Decorating Text

Find all current special offers on Adobe products.

Choosing a Font Family

The first thing you may want to do when creating your Web Site is to choose the font that you will be using for your body and headlines.

To set the font family type font-family: name, where name is your first choice of font. Here is an example

h1, h2 {font-family: "Helvetica";}

p {font-family: "Arial";}

Specifying Alternate Fonts

There will be some users that cannot view your Web Site with the fonts you have specified so, you may want to provide an alternate font to display your content. You may want to choose a font that is installed with most operating systems like Arial Black or sans-serif.

To specify an alternate font, after typing the font-family: name as described above, type , name2 where name2 is your second font choice. Separate each choice with a comma nd a space like so:

h1, h2 {font-family: "Helvetica", Arial Black;}

p {font-family: "Arial" sans-serif;}

Creating Italics

There are various reasons you may want to include italics in your text. So to create italics first type font-style: followed by italic or oblique. To remove italics type font-style: normal.

h1, h2 {font-family: "Helvetica", Arial Black;}

p {font-family: "Arial" sans-serif;}

.emph {font-style: italic;}

The .emph in this code is referring to the class which would be included within the body of the text like so:

<p>This is the body of the text and <span class= "emph">this is the section I want to emphasize.</span>So cool right?</p>

Applying Bold Formatting

Bold formatting is probably the most common and effective way to make text stand out. To apply bold formatting first type font-weight: followed by bold. You can also type bolder or lighter to use a value relative to the current weight. Try also using multiples of 100 up to 900, 100 being light and 900 bold.

Remember you can also remove bold formatting by typing font-weight: normal.

h1, h2 {font-family: “Helvetica”, Arial Black; font-weight:bold;}

Setting the Font Size

There are generally two ways to set the font size with CSS. The first method would be to give a specific font size like so:

h2 {font-size: 16px;}

In this first method you can also choose to write, but not limited to 1em which would be the same as 16px or use the following keywords: xx-small, x-small, small, medium, large, x-large, and xxlarge.

The second way to set fond size is to set a size that depends on the parent element’s size like so:

h2 {font-size: 1.52em;}

You can also choose to use a percentage like 152%. Relative keywords like larger and smaller will also work in for this case.

Setting the Line Height

Setting the line height is almost the same as setting the line spacing in MS Word. This is a good technique to help make your text more legible on the end users monitor.

To set the line height type line-height: then type n where n is the number that will be multiplied by the element’s font size. An alternative to this is typing p% where p% is a percentage of the font size. OR type a, where a is an absolute value in pixels.

h2 {line-height: 1.5;}

Setting All Font Values at Once

Here is a useful tip to set the font style, weight, variant, size, line height, and family all at one.

First type font:

If desired type normal, oblique, or italic to set the style. (see creating italics)

If desired type normal, bold, bolder, lighter, or a multiple of 100 (up to 900) to set font weight. (see applying bold formatting)

If desired, type normal or small-caps to remove or set small caps. (see using small caps)

Next type the font size. (see setting the font size)

If desired type /line-height, where line-height is the amount of space between lines. (see setting the line height)

Type a space followed by the desired font family or families, in order of preference. (see choosing font family)

Just remember that you can do each of these properties separately and if you decide to put them together that you can omit the the style, font weight, and caps properties. However, the size and family properties must always be explicitly specified (size than family) and the line height, which is also optional, must come after the size and the slash.

Setting the Colour

This is how you would change the color of specific elements on your web page using CSS.

First type color: followed by the color name (see Style Sheet Building Blocks)

h2 {color: #000000;}

It’s pie.

Changing the Text’s Background

When using the background style format you are not changing the background of your Web Page, but you are changing the background of the specified element. In other words you can select what parts of your document you want to highlight with background color.

To change the text’s background color first type background: followed by transparent or color where color is the name of hex color (see Style Sheet Building Blocks).

h2 {background: #90210;}

You can also use a image as the background by specifying an image url rather than a color or transparent like so, url(image.gif). You may also choose to type repeat to tile the image like you would on your desktop wallpaper or type repeat-x (for horizontal tiling) or repeat-y (for vertical tiling). Alternately you can type no-repeat to not tile the image.

If desired, type fixed or scroll to determine whether the background should scroll with the canvas.

One more addition you can have to your style is adding x y to set the position of the background image, where x and y can be expressed as a percentage or an absolute. By default x and y would be the top-left position by you can use values of left, center, and right for x and top, center, or bottom for y.

My way of doing it:

h2
{

background: url(http://www.alphaorganicmedia.com/logo.jpg);

background-attachment: fixed;

background-position: center;

}

Controlling Spacing

You can add or reduce space between words, otherwise knows as tracking by typing word-spacing: length, where length is a number with units as in 0.3em or 3px.

p {word-spacing: 0.4em;}

You can add or reduce space between letters, otherwise known as kerning by typing letter-spacing: length, where length is a number with units as 0.3em or 3px.

p {letter-spacing: 0.5px;}

To go back to default use the value normal or 0.

Adding Indents

Adding indents will create a space that will precede the first line of a paragraph. To do this type text-indent: length, where length is a number with units as in 2.1em or 10px

p {text-indent: 1.5em;}

Setting White Space Properties

By default, multiple spaces and returns in the HTML script are either displayed as a single space or ignored completely. If yo want the browser to display those extra spaces use the white-space property.

To set up this property first type white-space: followed by pre to have all white space appear or nowrap to treat all spaces as non-breaking. To go back to default use normal.

p {white-space: pre;}

Aligning Text

You may like to align certain text elements to the left, right, center, or justify.

To align text first type text-align: then type left, right, center, or justify to align the text to your liking.

p {text-align: justify;}

Changing the Text Case

This format property is great for taking an element and capitalizing the first character of each word, transforming all the characters to upper case, or transforming all the characters to lower case.

To do this first type text-transform:

Next type capitalize to put the first character of each word in uppercase.

Or type uppercase to change all the characters to uppercase.

Or type lowercase to change all the characters to lowercase.

Type none to return to default.

p {text-transform: capitalize;}

Using Small Caps

Some fonts have a small caps variant that includes a smaller version of the same characters.

To apply this property type font-variant: followed by small-caps.

To remove this property type font-variant: followed by none.

p {font-variant: small-caps;}

Decorating Text

With style sheets you can apply underlines, overlining, lines through the text, and blinking text.

To decorate text first type text-decoration:

Next use the corresponding properties to apply to your selected element, underline, overline, line-through, or blink.

To remove text decorations type none.

p {text-decoration: blink;}

Is there something wrong with this tutorial? Let me know

Training Videos for Web Designers

That concludes this tutorial. For a list of other CSS tutorials click HERE.

For previous tutorial “Defining Selectors” click here. For next tutorial “Layout with Styles” (coming soon)