Home > Reference Guides > Web Design & Development

Web Design Reference Guide

Hosted by Miraz Jordan

Guide Contents

< BackPage 80 of 339Next >

Cascading Style Sheets Part 1: Browser Styling

Last updated May 25, 2007.

By Sarah Horton, author of Access by Design: A Guide to Universal Usability for Web Designers

Back in the dark ages, web designers were compelled to use complicated and sometimes unorthodox methods to achieve interesting designs that displayed consistently across browsers. With the implementation of web standards and the mainstreaming of Cascading Style Sheets (CSS), we entered the age of enlightenment, where web designers code documents using valid, semantic HTML, and use CSS to control formatting. This approach has many advantages.

Separating content from presentation means that one document can be reformatted using CSS so that it looks good across devices—on a cinema display, cell phone, and on paper. And CSS offers options for controlling visual design above and beyond what is available using HTML, and not just for the fancy stuff, either. For instance, you can control inter-line spacing, or leading, for paragraphs, which can significantly improve readability. In the bad old days, designers who wanted to increase leading scattered itty bitty invisible graphics throughout the text to force space between lines (while walking 10 miles to school in the snow)! Fact is, Cascading Style Sheets are cool, powerful, and fun to work with—much more fun than nested tables and spacer graphics.

This is the first in a series of articles focused on the mechanics of style sheets. Here, we discuss browser defaults: what they are, where to find them, and how to overcome them. In future articles, we'll discuss fun stuff like how to shorthand style sheet markup, methods for styling for print and small screens, and maybe a bit on voice browsing sprinkled in for good measure.

Default Styling

Like it or not, browsers have style. Take a look at Example 1, a simple page without visual formatting supplied in the code of the page (Listing 1).

Listing 1: Simple HTML

<body>
<h1>The Eternal Question</h1>

<img src="horton15_ex01.jpg" alt="Chicken and egg - photo" width="330" height="221" />
<p>Which came first</p>

<ul>
<li>Chicken</li>
<li>Egg</li>
</ul>
</body>

What you see depends on factors like the browser you're using and your browser settings, but in most cases you'll see a page with margins on all sides, a heading that is large and bold, an image, a "normal"-sized paragraph, and an indented, bulleted list, and all the elements have space above and below. So, where do browsers come up with these ideas about formatting, and how are they implemented? In the next examples, we'll focus on Apple's Safari browser since its styles are easily revealed with just a little ferreting around.

Much of the formatting applied by Safari can be found in the html4.css stylesheet found here:

System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Versions/A/Resources/html4.css

The rules that affect the display in Example 1 are shown here in Listing 2, and their effect is illustrated in Figure 1 below.

Listing 2: Relevant Safari Styles

body {
  display: block;
  margin: 8px
}

h1 {
  display: block;
  font-size: 2em;
  margin: .67__qem 0 .67em 0;
  font-weight: bold
}

p {
  display: block;
  margin: 1.0__qem 0px
}

ul, menu, dir {
  display: block;
  list-style-type: disc;
  margin: 1__qem 0 1em 0;
  -khtml-padding-start: 40px
}

Figure 1: Safari sets default spacing for standard elements such as body, headings, paragraphs, and lists.

Poke around html4.css to learn how Safari implements styling. In fact, grab a cup of coffee and settle in. If you spend some time working through html4.css, you'll learn a good deal about how styles work.

Overcoming Defaults

When you begin fashioning a web page, you may think you're starting from a blank canvas—not so. Style sheets are applied based on inheritance, which means, unless you say otherwise, your pages inherit the styles supplied by the browser. And browsers have very different notions about styling, as illustrated in Figure 2, where the space before the page heading varies across four browsers from 17 to 29 pixels, or by as much as 70%. And this is just a small subset of browsers! Take a look again at Example 1 in different browsers and notice the variations, particularly when it comes to the margins around and between elements.

Figure 2: Browsers have widely varying notions about default styling, which means designers need to override browser styles to achieve consistent designs.

So, what's a designer to do? Overcoming browser defaults is simple, as long as you know what you're dealing with. You need to know which attributes are affected by browser defaults, and then define style rules that override those settings.

Take headings. Few designers would choose to use browser default heading styles, which are often described as "big and ugly" because they use only size to differentiate heading levels (see Example 2 and Listing 3). They also "float" on the page, unconnected from the content they describe.

Listing 3: Safari Default Heading Styles

h1 {
  display: block;
  font-size: 2em;
  margin: .67__qem 0 .67em 0;
  font-weight: bold
}
   
h2 {
  display: block;
  font-size: 1.5em;
  margin: .83__qem 0 .83em 0;
  font-weight: bold
}
   
h3 {
  display: block;
  font-size: 1.17em;
  margin: 1__qem 0 1em 0;
  font-weight: bold
}
   
h4 {
  display: block;
  margin: 1.33__qem 0 1.33em 0;
  font-weight: bold
}

More graceful designs employ attributes such as case, weight, and typeface in addition to size to visually represent information structure (see Example 3 and Listing 4).

Listing 4: CSS For Styled Headings

h1 {
  font-size: 1.5em;
  font-weight: bold;
  font-family: Verdana, Arial, sans-serif;
}
   
h2 {
  font-size: 1.1em;
  font-weight: bold;
  font-family: Verdana, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}
   
h3 {
  font-size: 1em;
  font-weight: bold;
  font-family: Verdana, Arial, sans-serif;
}
   
h4 {
  font-size: .9em;
  font-weight: normal;
  font-family: Verdana, Arial, sans-serif;
  font-style: italic;
}

However, these styles only affect typography and not spacing, and we know from Figure 2 that browser defaults are inconsistent, particularly when it comes to spacing. In order to fully take charge of our headings, we need to assign margin values, bearing in mind that whatever we define in our style sheets will override browser defaults (see Example 4 and Listing 5).

Listing 5: Headings With Margins Set To Zero

h1 {
  font-size: 1.5em;
  font-weight: bold;
  font-family: Verdana, Arial, sans-serif;
  margin: 0;
}
   
h2 {
  font-size: 1.1em;
  font-weight: bold;
  font-family: Verdana, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}
   
h3 {
  font-size: 1em;
  font-weight: bold;
  font-family: Verdana, Arial, sans-serif;
  margin: 0;
}
   
h4 {
  font-size: .9em;
  font-weight: normal;
  font-family: Verdana, Arial, sans-serif;
  font-style: italic;
  margin: 0;

}

But wait! I zeroed out the margins, but the headings are still floating around, untethered! What's going on? This page has a mind of its own! I quit!

This little drama illustrates precisely why it's important to become familiar with browser defaults, and to understand that, as web designers, we never start from a blank canvas. Instead, we inherit browser styles. And the drama becomes extra poignant when we're working with more complex elements, like lists and forms. The trick is to learn to recognize browser styles and, where necessary, override them with our own styles. In this case, to fully control the space between headings and paragraphs, we need to also override the browser rules for paragraphs (see Listing 6).

Listing 6: Safari Paragraph Styles

p {
  display: block;
  margin: 1.0__qem 0px
}

To get headings to sit right above paragraphs, we need to set the paragraph top margin to zero (see Example 5 and Listing 7).

Listing 7: Paragraph With Top Margin Set To Zero

p {
  margin-top: 0;
}

Ahhhh—much better...

So, the moral of the story is, if you find yourself wrestling with the browser over the formatting and spacing of, for example, lists, try assigning specific values to the element's margin and padding properties. In fact, some designers advocate setting margins and padding to zero for all elements and moving on from there (see Example 6 and Listing 8).

Listing 8: Rule To Zero Out Padding And Margins For All Elements

* {
  margin: 0;
  padding: 0;
}

While this approach works, it can produce unexpected results. For instance, the bullets in Example 6 disappear when padding is set to zero because, at least in Safari, the padding value applies to the space before the text, not the space before the bullet. With padding set to zero, the line begins straight away with the text. Rather than globally resetting browser styles, a more reliable approach is to assign new styles where needed, and at the individual element.

Resources

If you don't know what you're up against, browser styles can be a source of frustration. However, they're also an excellent tool for understanding the fundamentals of CSS. Get to know browser styles because, in the long run, the more you know each other, the better you'll get along.

Here are some good resources on browser styles and CSS:

Be sure to check out Eric Meyer's article, Really Undoing html.css. Read through the comments, too, for great tips and insights about working with browser styles.
Read Starting with CSS: revisited by Faruk Ateº for a good discussion about the benefits and risks of using the stat (*) selector to zero out margins and padding.
W3Schools offers a good, practical, short-and-sweet CSS Tutorial.

< BackPage 80 of 339Next >

Digg Digg Del.icio.us Save To Your Account

Related Resources

Author Talk (Audio & Video)

Recent Episodes

Build a Website From Start To Finish in Dreamweaver

Recent Episodes

See More Podcasts

User Group Q&A: Austin Adobe User Group: By Keely HildSeptember 19, 2012Comments; We've recently revamped our User Group newsletter to a more streamlined format! One of the new features of our newsletter is our User Group Q&A. Each month we will select one User Group that has been exceptional in their communication with meeting updates, giveaway requests and book reviews and ask them to share some insights and tips with us. This week, we turn the spotlight on the Austin Adobe User Group!

Peachpit's Sweet CS6 Sweepstakes!: By Keely HildSeptember 13, 2012Comments; Do you "like" our eBook Deals of the Week, our helpful articles and chapter excerpts, our podcasts and newsletters? Most importantly, do you "like" our books, eBooks, videos, and authors?! Enter our Facebook Sweet CS6 Sweepstakes today!

Live Twitterview with Nancy Lyons and Meghan Wilker: By Laura RossMay 3, 2012Comments; Join authors Nancy Lyons and Meghan Wilker for a lively Twitterview about interactive project management on May 10.