Formatting Text with CSS

CSS gets a lot of attention these days…in the web design arena. And, rightly so. CSS makes it easier to maintain or update a site. CSS is efficient and effective.

Efficient in that it with one small change inside CSS, I can change all my headings on the site to a different size or a different color. Or, I can shift the right hand column of the page layout to the left side. (OK, that might a bit more than just one ‘small’ change.)

Effective in that I can now control the placement of elements and not be limited to kludgy HTML.

In this post I want to focus on formatting text with CSS. Before we get started, let’s discuss where we place our CSS code. I recommend placing it in an external style sheet. Create a new file, add your CSS styles (as defined below), and save it with a .css file extension. Then, in your html page, between the opening and closing tags, add a tag to refer to the file you just saved. For example:

Without going into a lot of detail, the format of CSS is:
element { property: value; property: value; }

You can have as many property:value’s as you want, using the appropriate CSS property for that type of element.

Since we’re focusing on formatting text, we will only ‘re-define’ the ‘text’ tags in html.

First off, let’s say I want all the text on my site to use Georgia, Times New Roman, TImes, serif.
The CSS would be

body {font-family: Georgia, “Times New Roman”, Times, serif; }

If I want all my headings to be red, I use CSS as follows:

h1, h2, h3, h4, h5, h6 {color:red;}

If I want h1 to be 24px and bold I add:
h1 { font-size: 24px; font-weight: bold; }

For the second level heading, I might have:

h2 { font-size: 20px; }

The second level heading will also use the font Georgia and will be in red. It will pick up these attributes from the previous declarations.

If I wanted my paragraphs to have a certain line height, I add this to my CSS:

p { line-height: 20px; }

Or, I could add the same property:value to the body tag.

This is just a start on how to format text using CSS. We’ve only redefined how the HTML tags will look. We haven’t touched classes or IDs yet.

A site I highly recommend in learning CSS is w3schools.com. It has an interactive area where you type in the CSS and you immediately see your results.

Leave a Comment

Your email address will not be published. Required fields are marked *