New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Styling headings

From: Web Accessibility Principles

Video: Styling headings

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

Styling headings

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

Show transcript

This video is part of

Image for Web Accessibility Principles
Web Accessibility Principles

68 video lessons · 25585 viewers

Zoe Gillenwater
Author

 
Expand all | Collapse all
  1. 2m 0s
    1. Welcome
      1m 3s
    2. Using the exercise files
      57s
  2. 33m 15s
    1. What does accessibility mean?
      5m 51s
    2. How does accessibility help your users?
      3m 30s
    3. Experiencing a website via a screen reader
      5m 46s
    4. How does accessibility help you and your clients?
      3m 9s
    5. Overview of Section 508 standards
      5m 51s
    6. Overview of WCAG standards
      6m 4s
    7. Understanding consistency and semantic markup
      3m 4s
  3. 54m 31s
    1. Understanding screen readers and accessibility tools
      6m 12s
    2. Getting accessible browsers
      5m 41s
    3. Customizing Firefox for accessibility testing
      5m 53s
    4. Using custom accessibility toolbars
      5m 28s
    5. Using Fangs and the Color Contrast Analyzer
      5m 30s
    6. Accessibility tools to bookmark
      5m 53s
    7. Using automated accessibility checking tools
      4m 57s
    8. Setting up the JAWS screen reader on Windows
      6m 42s
    9. Using the VoiceOver screen reader on Mac OS X
      5m 52s
    10. Setting Dreamweaver accessibility preferences
      2m 23s
  4. 26m 12s
    1. Avoiding tables for layout
      3m 30s
    2. Using CSS for layout
      2m 40s
    3. Creating a fixed-width layout
      5m 51s
    4. Creating an elastic layout
      3m 51s
    5. Creating a liquid layout
      3m 4s
    6. Customizing a liquid layout
      7m 16s
  5. 1h 6m
    1. Specifying the language
      3m 43s
    2. Setting page titles
      2m 16s
    3. Setting headings and paragraphs
      9m 55s
    4. Styling headings
      9m 56s
    5. Hiding section headings from sighted users
      6m 41s
    6. Styling text for readability
      6m 41s
    7. Ensuring proper color contrast
      6m 36s
    8. Creating text emphasis
      4m 29s
    9. Indicating quotations
      4m 29s
    10. Creating basic lists
      4m 16s
    11. Styling lists
      7m 15s
  6. 1h 15m
    1. Using lists for navigation
      6m 45s
    2. Creating a horizontal navigation bar
      13m 25s
    3. Creating a vertical navigation bar
      11m 44s
    4. Adding skip navigation links
      12m 0s
    5. Hiding skip navigation links
      6m 17s
    6. Proper link text and title attributes
      6m 11s
    7. Opening new windows
      4m 28s
    8. Accessibility limitations of fly-out menus
      6m 30s
    9. Creating an accessible fly-out menu
      8m 38s
  7. 27m 55s
    1. Proper ALT text for navigation images
      4m 57s
    2. Proper ALT text for decorative images
      5m 19s
    3. Adding ALT text to an existing site
      6m 9s
    4. Adding ALT text to image maps
      5m 58s
    5. Describing complex graphics
      5m 32s
  8. 34m 1s
    1. Using tables for data
      3m 0s
    2. Creating header cells
      4m 5s
    3. Adding table captions and summaries
      9m 9s
    4. Styling tables
      5m 19s
    5. Applying header cells to complex tables
      6m 52s
    6. Adding id and headers attributes
      5m 36s
  9. 42m 7s
    1. Understanding form accessibility issues
      3m 7s
    2. Labeling form fields
      6m 9s
    3. Adding fieldsets and legends
      4m 42s
    4. Moving forms out of tables
      3m 44s
    5. Cleaning up a form's appearance
      4m 53s
    6. Aligning labels and fields using CSS
      9m 39s
    7. Indicating required fields
      6m 15s
    8. Dealing with CAPTCHA
      3m 38s
  10. 7m 29s
    1. The Text-Only technique
      3m 21s
    2. The Access Keys technique
      2m 35s
    3. The Tab Index technique
      1m 33s
  11. 18s
    1. Goodbye
      18s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.