The importance of typography on the webLesson 6, Formatting Text with CSS 125This is the CSS border property, which allows you to add borders around your elements.
You will eventually use borders as decoration in your layout, but here they are being used to
help you understand how elements such as headings and paragraphs interact with each other.
You will now add this same code to your h1 and h2 elements.
4 Select the border:thin red solid; code from your paragraph rule and press Ctrl + C
(PC) or Command + C (Mac) to copy the code.
5 Click inside the h1 style and press Ctrl + V (PC) or Command + V (Mac) to paste the
code. Repeat this step for the h2 style.
6 Save your fi le and preview it in your browser. With the red borders applied, you can now
see the space between the elements more clearly.
Applying borders to your elements helps you see the default margins more clearly.This space between your paragraphs and headings is a result of the default margins as defi ned
by your web browser. You have learned about browser defaults before in the font-size
exercise, and this is very similar. HTML elements have default styles associated with them
that include properties such pixel size, margins, bold styling, italic styling, and many others.
You need to set specifi c rules to override the default styles for these properties. In this case,
you will adjust the space between the heading 2 and the fi rst paragraph.
7 Return to your text editor and add the following line to your h2 element (highlighted in red):
h2 {
font-size:1.25em;
border:thin red solid;
margin-bottom:0em;
}
The margin-bottom property aff ects the margin spacing on the bottom of the h2 element
only. However, this is not enough to aff ect the spacing between your heading and the
paragraph. You also need to set the top margin of the paragraph.