Code

Web Design Tips: Basic CSS for Headers

How your site looks matters. Even subtle improvements—like using fonts or colors that compliment your theme—can have a positive effect on how consumers rate the trustworthiness of your store.

According to a 2003 Stanford University study of 2,440 people, 46.2 percent of online shoppers gauge the credibility of an ecommerce site by how professional and eye-pleasing the site looks. In fact, rightly or wrongly, appearance is even more important to shoppers than the presence of a security banner promoting hacker or credit card safety.

In this edition of Web Design Tips, a recurring Practical Ecommerce feature, I will show you the ins and outs of basic header formatting using a cascading style sheet (CSS) and HTML. This feature is aimed at HTML and CSS novices who have very little design experience.

Formatting Headers with CSS Video

Headers

In HTML, headers identify section titles or introductory content. More specifically an <h1> tag (element) identifies a first-level header of a document; for example, section titles on your store’s homepage. The content inside your <h1> tags should be the most important or most general section headers on a page.

In terms of writing HTML, the <h1> tag is used just before the header content and the </h1> is used just after it. The “/” means close or end.

<code>&lt;h1&gt;Wooden Fruit Spoon&lt;/h1&gt;
</code>

There are several ways to add emphasis to a header tag in basic HTML using phrase elements.

  • <em> indicates emphasis and will render your header in italics.
  • <strong> is like <em> on steroids and indicates strong or bold emphasis. This phrase element will make your header bolder.

    Wooden Fruit Spoon

    and

    Wooden Fruit Spoon

There are many other phrase elements that you could use, but <em> and <strong> are considered the most useful for ecommerce sites. See phrase elements in the references section at the end of this article for more information.

Other header tags include <h2> to <h6>. As the number increases, the level of importance decreases, so an <h3> tag identifies a section title that is less important or lower in a hierarchy than an <h2> tag. Likewise, an <h2> tag identifies a section title that is less important or lower in a hierarchy than the aforementioned <h1> element.

Enter the CSS

“CSS is a simple mechanism for adding style (e.g. fonts, colors, spacing) to a web document,” according to the World Wide Web Consortium (W3C), which develops the standards for website coding.

Essentially, CSS separates content from style. The HTML file holds the content and describes what the content is, while the CSS describes how the content should look on a page. CSS is the best way to adjust the size, font, color, or position of the header tags on your web pages because it allows you to offer different styles for different contexts. As an example, you might have one CSS for when visitors look at your site online and a second CSS for when those same customers print out an order confirmation.

CSS Selectors and Basic Code

To change the way a header looks in CSS you can either address the element (i.e. <h1>) and make a change to every incident of the element on a page (every <h1> for example); you can address a class or ID selector which styles a subset of an element or elements; or you can address contextual or descendent selectors which modify the style of some elements based on their relationship to other elements.

Elemental Selectors

If we wanted to have every <h1> tag on our website appear in the color red, we might write some code that looked like this:

<code>   h1 {color: red;}
</code>

or

<code>   h1 {color:#ff0000 ;}
</code>

In this example the “h1” selects every <h1> tag or element in the page. The content inside of the braces { } describes the style, and here we are adjusting the color property. Notice that we place a colon after color property and a semicolon after the code indicating our style. Lastly, CSS recognizes several color names like red or uses hexadecimal code (#ff0000 is the hexadecimal code for red) to identify a much wider range of colors.

Class and ID Selectors

If we want to change only some of the <h1> tags or elements on our page, we could use an ID or class selector. These selectors are defined by you, the page author, and provide a lot of flexibility.

Use a class selector when you want to make the same style change to more than one kind of element. For example, if we wanted to make our <h1> elements and our <p> (paragraph) elements appear in the Arial font, we could use a class selector to address both kinds of elements. The CSS might look like this:

<code>   .arial-font {font-family: Arial;}
</code>

And in the HTML, we might code something like this:

<code>    &lt;div&gt;
    &lt;h1 class="arial-font"&gt;Wooden Fruit Spoon&lt;/h1&gt;
    &lt;p class="arial-font"&gt;Magnus es, domine, et laudabilis valde: magna virtus tua, et sapientiae tuae non est numerus. et laudare te vult homo, aliqua portio creaturae tuae, et homo circumferens mortalitem suam, circumferens testimonium peccati sui et testimonium, quia superbis resistis: et tamen laudare te vult homo, aliqua portio creaturae tuae.tu excitas, ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum. &lt;/p&gt;
    &lt;img src="add.png" /&gt;
    &lt;/div&gt;
    &lt;div&gt;
    &lt;h1 &gt;Another Wooden Fruit Spoon&lt;/h1&gt;
    &lt;p&gt;Magnus es, domine, et laudabilis valde: magna virtus tua, et sapientiae tuae non est numerus. et laudare te vult homo, aliqua portio creaturae tuae, et homo circumferens mortalitem suam, circumferens testimonium peccati sui et testimonium, quia superbis resistis: et tamen laudare te vult homo, aliqua portio creaturae tuae.tu excitas, ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum. &lt;/p&gt;
    &lt;img src="add.png" /&gt;
    &lt;/div&gt;
</code>

If you examine the code above, you will notice that there are two <div> elements. Each of these has an <h1> tag and element an <p> tag. Inside of the first <div> we identify the class selector for both the <h1 class="arial-font">Wooden Fruit Spoon</h1> and the <p class="arial-font">Magnus ...</p>. The content for these elements will be rendered in the Arial font. But the second <h1> and <p> will be rendered with the default font for the page or browser.

If we wanted the first <h1> tag on our page to different—say white font and a black background—from the rest of the <h1> elements, we might use and ID selector. In CSS an ID is denoted with the # symbol.

<code>    #special {color: #ffffff; background-color: #000000;}
</code>

We would identify our “special” <h1> tag in the HTML like this:

<code>   &lt;h1 id="special"&gt;Header Content&lt;/h1&gt;
</code>

Contextual or Descendent Selectors

You can also apply styles based on relationships. For example, if you wanted <h1> elements inside of a <div> tag to have a different style than an <h1> not nested in a <div>, you may uses a contextual selector. Your CSS might look like this:

<code>   h1 {font-variant: small-caps; color: #000000;}
    div h1 {font-variant: normal; color: #ff0000;}
</code>

Notice in the code that we first introduce a style for h1 that applies to all <h1> elements on the page. Next we indicate a contextual selector div h1. This style applies only to <h1> tags that are nested inside of any <div> tag.

Styling Headers Listed

Using CSS you can control a header’s font, color, size, position, and more using properties.

Text Properties for Headers

  • text-align. This property describes how some content (a header for example) is aligned in relation to a block of content.
  • text-decoration. Used to underline, overline, or strikethrough some text, this property decorates a text element. Acceptable values include the aforementioned underline, overline, and strikethrough, plus none and inherit—which means that a particular element (<h1> as an example) of the property takes the same computed value as the property for the element’s parent.
  • text-shadow. Rarely used, this property allows you to specify a shadow offset, blur radius, and color.
  • letter-spacing. This property permits you to specify the space between the text characters.
  • word-spacing. Similar to letterspacing_, but applicable to an entire word.
  • text-transform. Used to adjust capitalization, you can specify capitalize, uppercase, lowercase, none, or inherit.

Font Properties for Headers

  • font-family. This property lets you specify a comma-separated list of fonts. Since not every system has every font possible, you can prioritize your fonts. The browser or user agent will try to render your first font listed. If that font is unavailable, the browser will move down the list.
  • font-style. Adjusting typography, this property defines whether a font is normal (sometimes called Roman), italic, or oblique.
  • font-variant. This property will transform lowercase letters into smaller versions of the capital letter glyphs.
  • font-weight. As its name implies, this property adjusts text weight. You can choose normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, or_ 900. Normal is equal to _400. Bold is the same as 700. Bolder is just like 900, and lighter is equal to 100.S
  • font-stretch. A uniform way to adjust the spacing between the characters and words in some text. You can request ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, and ultra-expanded.
  • font-size. This property describes the size of the characters for the font you’ve selected. Values can be absolute (xx-small, x-small, small, medium, large, x-large, and xx-large), relative (larger or smaller), specific (i.e. 15pt), or a percentage.
  • font. This is a shorthand property that allows you to introduce values for several font properties at once. For example, you can specify a font-style, font-variant, font-weight, and font-size as an space-separated list.
    General Properties for Headers
  • color. This property describes the color of the text.
  • background-color. Use this property to describe a colored background behind your header.

Link to the CSS

Now that you have styled your header, you will need to establish a link between your HTML file and the CSS file. You can do this by placing a <link> tag in the <head> section of your HTML. Here is a simplified look at the code.

<code>   &lt;head&gt;
   &lt;link rel="stylesheet" href="style.css" /&gt;
   &lt;/head&gt;
</code>

Of course there will be other lines of code in <head> section, so in actual practice it may look something like this:

<code>&lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html;charset=utf-8" /&gt;
    &lt;meta name="generator" content="Adobe GoLive" /&gt;
    &lt;meta name="description" content="Wooden Fruit Spoon for serving tasty fruit" /&gt;
    &lt;title&gt;Fruit Spoon&lt;/title&gt;
    &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
                         &lt;script type="text/javascript" src="thickbox.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="style2.css" /&gt;
    &lt;link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" /&gt;
&lt;/head&gt;
</code>

Summing Up

In this Web Design Tips, I discussed headers in HTML and CSS. I offered a brief description of header tags, CSS selectors, and some of the CSS properties that are applicable to headers. Finally, I have included a brief video to offer further examples.

Editor’s Note: We would like your input. Are there web design challenges that we can help with? Have you seen something really awesome on an ecommerce site that you would like to emulate? Email your ideas to armando@practicalecommerce.com, and we will consider publishing them as a Web Design Tip.

Resources

Armando Roggio
Armando Roggio
Bio   •   RSS Feed


x