Your web home for how to's for web beginners. A jargon-free zone dedicated to helping your web knowledge grow.

Help For Web Beginners

Press CTRL + D to
Bookmark this Page

CSS to Style Text

Using CSS to style text makes it easier than ever before to control how text looks on the screen.

There's a lot of options on styling text with CSS, so let's get started.

For our examples, we'll use a simple paragraph tag.

CSS Text Size

There are several measurements that can be used when styling text with CSS; they are: em's, points, percentages, and relative sizes.

Here's CSS code that uses the different techniques:

p { font-size: 1.0em; }

p { font-size: 14pt; }

p { font-size: 100%; }

p { font-size: medium; }

The sizes listed above are traditionally the default value for font size. CSS accepts the following values for relative size: xx-small, x-small, small, medium (the default), large, x-large, and xx-large.

CSS font-size is an inherited value. That means if the parent font is 12 points and a child element is set to 110%, the font size for the child will be 13.2 points. If the child is set to 80%, it will be 9.6 points.

I typically use percentages to allow for different browsers. Most layouts desire different page elements to be larger or smaller in relation to the others and using a font size of a percentage maintains that well. Also, by using percentages, someone who visits your site and has vision problems will be able to increase the text size through their browser.

Keep in mind that differences in fonts may cause two characters of the same size but in different fonts to appear differently on the screen. We will see that with the examples for font choices.

CSS Text Font Choices

Again keeping this relatively simple, we'll use a paragraph tag.

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

This CSS code tells the browser to use the font Arial Narrow for all paragraphs. Any font family name that is 2 or more words needs to be surrounded by quotation marks.

It is good practice to list alternative options in case the website visitor's machine doesn't have the font you wish to use installed. So, in our example, Arial Narrow will tried first, then Arial and should neither be available a sans-serif font will be used.

It is recommended to use general font styles for websites. The general font styles for CSS and websites are:

  • serif - Sample text in serif font style.
  • sans-serif - Sample text in sans-serif style.
  • cursive - Does this look like your handwriting?
  • fantasy - Fantasy style will vary considerably between machines.
  • monospace - Remember the early computers?

The only thing different between the examples above is the font-family. Notice how they vary in size. You will need to keep this in mind when creating your layouts.

CSS Code for Text Size and Font Family

Creating a CSS style definition that specifies both text size and font family is very straighforward. Here's the CSS code to creat a paragraph style that has a text size of 120% and uses the font family serif:

p { text-size: 120%; font-family: serif; }

The general font styles are the most generally accepted among the various browsers. There are more advanced methods that involve sending the browser a specific font, but those methods are beyond the scope of this tutorial.

Learn more about CSS and formatting text in the next tutorial in this series: CSS and Text Styling Techniques

Be sure to check out Help For Web Beginners other HTML & CSS Tutorials.

About the Author

HelpForWebBeginners.com is a website dedicated to providing free, easy to understand, online How To's for true web beginners. While the materials are not free or available for reprints, they are offered freely for individual use. Please use the contact page to let Michele know if this tutorial has been helpful or if there are any other beginner web programming related tutorials you would like to see.