>> We now have real, structured text on the page using paragraphs and headings. But the default text size of the headings is pretty large compared to the main body text size. The default size and spacing of heading text is often what deters people from using headings properly or even at all, but using the concept of separation of content and presentation we can keep our headings in the HTML and just use CSS to change their default appearance. If you're following along with the exercise files, we're working on the file visitors.html.
It's in the 04_04 folder of the chapter four exercise files. The first style that we're going to add to our headings and paragraphs is controlling their margins. Go to the CSS styles panel and click on the new CSS rule at the bottom of the panel. It looks like a piece of paper with a plus sign on it. This opens the new CSS rule dialogue box. For selector type, choose advanced. The selector that's currently shown is based on wherever your cursor was in the page when you clicked on the new CSS rule button.
Delete that text. The selector that we're going to write is a group selector. That simply means that it styles a number of elements at one time. In the selector field type H1, H2, H3, H4, H5, H6, P. This rule will style all the levels of headings from one to six as well as the paragraph element. For the define in option choose this document only then click okay.
This brings up the CSS rule definition box. The property that we want to change, margin, is listed under the box category. So click on box under the category listing on the left side. On the right hand side under the listing for margin, uncheck the same for all box. In the top box, type zero.
This is removing the default top margin on all of our headings and all of our paragraphs. They'll still be spaced out from each other by the default bottom margin that all of these elements have. But removing the top margin enables us to control the spacing between each of them more precisely. Once you've typed zero in the top box, click okay. This is the only property that we're going to add to this rule. The new rule now shows in the CSS styles panel and its properties are listed below. The appearance of the page hasn't changed yet, because bottom margins still exist on all of these elements.
Now we can start editing those bottom margins and changing how the headings look. Click on the new CSS rule button at the bottom of the CSS styles panel. For selector type this time, click on the tag button. In the Tag Select menu below, click on the arrow and scroll down the list to select H1. Keep this document only checked for the define in option, then click okay.
Once again, go to the box category of the CSS rule definition dialogue box, in the margin section on the right side of the box, uncheck the same for all checkbox. In the bottom field, enter .5. In the Select menu, below that field, choose M as the value. As we saw when we made an elastic layout, the M is a relative unit of measurement that corresponds to the size of text characters. By setting the margin in Ms, we're ensuring that no matter what text size the user has, the space will be proportional.
If we were to set a pixel size that margin gap would never adjust no matter what font size the user had. If the user had a very small font size it might look too big, whereas if they had a very large font size, it might not be enough spacing to make the text easy to read. Now let's go to the type category of the dialogue box. Click on type under the category listing on the left hand side. Click on the arrow in the font field and choose Georgia, Times New Roman, Times Serif from the list.
This sill set our font to Georgia if it's available on the user's machine. If not, the browser will continue going through the list of fonts we've specified until it finds one it can use. For weight, select bold. In the size field, enter 170. And then for the unit, choose percent. This means the H1 text will be 170% of the base font size set on the page. Again, by using a relative unit, we're ensuring that no matter what the user's font size is, things stay proportional.
Finally, click in the color field, type #308594. This color value is the same turquoise used in the logo for the website. Now click on okay to accept all of these rules. You can see that the appearance of the H1 has changed now. Let's next create rules for the H2 and H3 tags that we have on this page as well. Click on the new CSS rule button in the CSS styles panel, choose the tag option for selector type.
Click on the arrow of the Tag menu and scroll down to select H2. Keep this document only checked, then click okay. Let's set the same color that we used for the H1, so type #308594. For the font size, type 110, and in the Unit menu, choose percent. In the Weight menu, choose bold.
Click on the arrow of the menu next to the case option and choose uppercase. Now let's go to the box category of the dialogue box. Click on box in the category list. In the margin section of the screen, uncheck same for all and in the bottom box type in .3. In the Unit menu, choose Ms. Next, click on the border category. We're going to create a border beneath our H2 text. Since we only want it on the bottom, uncheck the three same for all boxes shown on the screen.
Click on the arrow of the bottom menu listed under the style heading, choose solid. Under width, type one and leave pixels selected as the unit of measurement. Finally, in the color box, type #D5DDDD. Now that we have a border set on our H2, we might want to add a little bit of padding between the bottom of the text and where the border starts. So go back to the box category, uncheck the same for all box under the padding heading.
In the padding bottom box, type .1 and choose Ms as the unit of measurement. With all of these properties set, click okay. Scroll down the page to see our H2s. You can see that now the text is all in uppercase, the color has changed and there's a border beneath each H2 tag. The last heading that we need to style for this page is the H3, so click on the new CSS rule button in the CSS styles panel.
For selector type, choose tag. In the Tag menu, scroll down and select H3. Keep this document only select and click okay. In the Font menu at the top of the CSS rule definition dialogue box, choose, once again, Georgia, Times New Roman, Time Serif. In the Weight menu, choose bold. In the size box, type 110 and choose percent as the unit of measurement.
This is the same size that we used for our H2 tags. Generally you'll want each heading higher up the hierarchy to have a larger font size to make it visually clear what that hierarchy is. In this case, though, the H2s have their text completely capitalized. That's going to make them appear larger and have more emphasis than our H3 tags. Finally, in the type category, click inside the color box and type #308594.
Next, go to the box category. Underneath margin, uncheck the same for all box. In the bottom box, under margin, type zero then click okay. Scroll down the page to see our H3 elements. You can see that there is no longer any space between the bottom of each H3 and the paragraph that follows it. Each of the elements are still distinct from one another in the HTML, but we've used CSS to remove the margin and change the visual style.
This gives you just a few options for how you can style headings. It's clear that they don't have to be huge or ugly, just make sure that you keep a good structure of headings in your markup, then add on layer of CSS styling for sighted users. An additional change that you might want make for sighted users is removing the page section and labels from their view, such as the section navigation and footer headings that we currently have in our page. In the next movie we'll use CSS to accomplish this as well.
Get unlimited access to all courses for just $25/month.Become a member