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 & Font Styles

Font Style tells the browser how to style the font.

The values for font style are: normal, italic, and oblique.

Building on our example from part I, the CSS code to display a paragraph element with font size of 200%, a font-family of sans-serif, and a font-style of italic, would be:

p { font-size: 200%; font-family: sans-serif; font-style: italic; }

And that would look like this.

A font-style is normal by default. Since font-style is an inherited style, a child element of our example would need a font-style of normal to not also be displayed in italic.

Not all fonts are created with an oblique style; those that don't will be displayed in italic if the oblique style is assigned.

CSS Font Variant

Font variant has one purpose, to display elements in small caps. As font variant is also an inherited style, the options for font variant are small-caps and normal.

CSS code for font variant:

p { font-variant: small-caps; }

or

p { font-variant: normal; }

CSS Font Weight

CSS gives us the ability to control how dark or light text appears. To make something bold, the CSS code would be:

p { font-weight: bold; }

With the advent of CSS to control the darkness or lightness of text, we have more options than just bold or not bold. We now have something called absolute weight. Absolute weight allows us to use a scale from 100 to 900 (with 400 being the default normal weight) to assign how text displays. Let's see some examples that include the CSS code for each.

  • p { font-weight: 100; }
  • p { font-weight: 200; }
  • p { font-weight: 300; }
  • p { font-weight: 400; }
  • p { font-weight: 500; }
  • p { font-weight: 600; }
  • p { font-weight: 700; }
  • p { font-weight: 800; }
  • p { font-weight: 900; }

This technique is highly dependent upon the font and browser being used. If the font does not include the full range of weight values, you may only have two or three different weights to use.

Relative values of bolder and lighter may also be used.

font-weight is also an inherited attribute and is cumulative. If the parent element has a font-weight of 400 and the child is assigned a font-weight of bolder, the child is essentually assigned a font-weight of 500.


If you haven't done so, please visit Part I of this tutorial: 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.