Use CSS to apply color, alignment, and other style properties to web page text in Dreamweaver.

Abstract art featuring men playing didgeridoos with text floating in a colorful sky.

 

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 and after illustration showing the difference when using CSS to style text.

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 */.

CSS opened in Dreamweaver in Split View.

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;
}

The h1 header text size is enlarged to 48 px.

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;
}

The h1 header font family is changed to sans-serif options.

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.

CSS

h1 {
    ...
    font-family: Gotham, Tahoma, sans-serif;
    text-align: center;
h2 {
    ...
    color: #282828;
    text-align: center;
}

The h1 and h2 headers are changed to centered alignment.

Change text color

Text is black by default text, but the color of h1 can be changed with a color property 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;
}  

The h1 header color is changed to an orange color using the Eyedropper tool.

The h1 header color is changed to an orange color using a hex code.

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;
}  

The h2 header font style is changed to italics.

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;
}  

The h2 header font weight is changed to 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.

CSS

h1 {
    ...
    color: #F67A53;
    text-transform: uppercase;
    letter-spacing: .08em;
}

The h1 header is changed to uppercase using a Text-transform tag, and letter spacing is added.

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.

Vertical space is adjusted between the h1 and h2 headers using the line-height property.

Click Preview in Browser and choose your preferred browser to see your styled text.

Save your files in order to view the changes.

Click File > Preview in Browser and choose preferred browser to see styled text.

Saage abi kiiremini ja hõlpsamalt

Uus kasutaja?