Web Design with HTML and CSS

124

The importance of typography on the web

Web Design with HTML and CSS Digital Classroom

Using margins to modify the space between your text

In this exercise, you will work with the CSS margin property in order to change the amount

of space between your various text elements. Understanding how the margin property

works and how to control it is key to understanding CSS, and in fact is the fi rst step toward

CSS layout. In order to better understand all the eff ects of using margins for text, you will

fi rst add the margin property to your body style.

1 In the body style, add the following line (highlighted in red):

body {

font-family:"Trebuchet MS", Tahoma, Arial, sans-serif;

font-size:100%;

margin:0 20%;

}

This margin property sets the margins of the page in shortcut form. The 0 value is for

the top and bottom margins. The 20% value is for the left and right margins.

2 Save your page and preview it in your browser. You can see that your text is centered in

your browser window. Change the width of your browser window and you see the text

refl ow.

The result of changing the left and right margins of the body to 20%.

Return to your text editor.

You will now work further with margins in order to begin controlling the space between

your elements. First, you will add temporary borders to your text elements in order to better

understand how margins work.

3 In the style for your paragraph element, add the following line (highlighted in red):

p {

font-family:Georgia, "Times New Roman", Times, serif;

font-size:0.875em;

border:thin red solid;

}