Style web page text with CSS

Check out Typography and the web for more details on how you can enhance the typography of the pages you design.

When setting up the structure of your text in HTML, its style is set to a default font. Adding CSS text styling can make great improvements to the hierarchy, readability, and overall visual appeal of your page designs.

Before you start

Download and save the project files. Open style-text.html in Dreamweaver and have styles.css showing in Split View. Resize the code view window so that all the text in the web design is to the left of the saturn graphic.

In the code view window, scroll down to /* Start here */.

Change text size

To make the h1 larger, add a font-size property under the h1 selector. An <h1> element creates a main heading on the page.

CSS

h1 {margin: 0;font-size: 48px;
}

Change the typeface

The default font for HTML pages is usually Times New Roman. You can change the font by adding a font-family property. You can specify several fonts separated by commas, and a web browser will display the first font on the list that is available on the user’s computer. As a catchall, always include “sans-serif” or “serif” at the end of your list to ensure that the browser chooses the best match based on the fonts available.

CSS

h1 {
...font-size:48px;font-family:Gotham, Tahoma, sans-serif;
}

Change the text alignment

Text is always left-justified by default, but can be controlled by adding a text-align property. Text can be aligned left, right, center, or justified. Add the text-align: center; property to the h1 selector and the h2 selector. An <h2> element creates a sub heading on the page.

Text is black by default text, but the color of h1 can be changed with a colorproperty and a hex value. After you type “color:” you will see a contextual menu. Double click the Color option, then click on the Eyedropper in the Color menu. Click on the red-orange area of the planet graphic to select the color, then press return. The hex value representing the red-orange will be automatically added. You can also simply type a hex code manually. Don’t forget to close the property with a semicolon!

CSS

h1 {
...text-align: center;color: #F47A53;
}

Italicize text

You can use the font-style property to make text italicized. Change h2 to italics by adding this property with a value of italic.

CSS

h2 {
…text-align: center;font-style: italic;
}

Change the font weight

By adding a font-weight property, you can make text thinner or thicker. The weight of text is specified using multiples of 100, with 100 being a very light weight and 900 a very heavy weight. Use this property to reduce the weight of h2.

CSS

h2 {
…font-style:italic;font-weight:300;
}

Add other useful text properties

Text-transform allows you to easily make text all uppercase or lowercase. Letter-spacing can be used to add more horizontal space between all the letters controlled by a selector. Try adding these selectors to h1.

If you look at the p selector, you’ll notice the line-height property, which gives you control over the vertical space between lines of text. Try deleting the line-height property to see what a difference in readability this property can make! Press Command + Z (Mac) or Control + Z (Windows) to undo the change.