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.
