Our articles on web page design cover a wide range of topics, all focused on designing web pages with Cascading Style Sheets (CSS). In this series, we focus on designing the smaller elements, the design elements found on a web page. You can find even more aggressive and unique designs in our CSS Experiments that might suit your web page design. Let’s start this section with fonts, text, links, and headings, the content design elements.

Fonts

Many of our designs began as CSS experiments, some trial and error before we found out what worked for us. So we are sharing with you some of the techniques that go into creating these pages and our CSS, HTML, and web page design elements.

We like to keep our site content simple and clean with good use of space. More importantly, our site is designed to be as user-friendly and accessible as possible. We want our site viewed by everyone and everything, from the blind and visually impaired to small handheld computer screens. Therefore, we set a base font and the rest of our fonts are set by percentage or fraction, allowing the user to override our font-sizes to accommodate their viewing needs.

Use also use a variety of similar fonts in our font-family list to increase the odds of the font we prefer showing up on the page. Fonts are only visible when the user has those fonts installed upon his or her computer. We always include a generic font reference to serif or sans-serif to ensure a specific look if not a specific font as a fallback.

Headings

For the most part, our headings are simple and consistent throughout our site. As nature photographers, it was important that we present a very simple background and text format so our photographs would jump off the page with color and artistic and dramatic license. Therefore, we kept to a simple blue and white theme. Yet, as simple as the design is, within that theme there are shades of blue to add a little more impact.

Headline Four

We decided to feature a bit of jazz in our H3 heading design. We use the H3 selector frequently in our articles to separate content into easily consumable sections. The H3 style sheet rules set the color and style of the text, then adds a line that goes across the page. At the end of the line along the right margin is a small photograph of ours. To add some variety, we change the picture and the color of the horizontal line dependent upon the seasons.

Text Characteristics

Throughout a web page there will be text elements you want to look a certain way. This includes links, but we’ll get to those in a minute. Specifically, these are the occassional bit of color or an impact of bold or italic, or a positioning move to make the text look the way you want it to look. Here are a few of ours:

This is underlined

u, ins {
text-decoration:underline}

<u>This is underlined </u>

This is italic

i, cite, em, var {
font-style:italic}

<i>This is italic </i>

This is bold

b {
font-weight:600}

<b>This is bold </b>

This is code or keyboard style and it is an inline code which can sit inside of regular text.

tt, code, kbd, samp {
font-family:monospace; color:black}

<p>This is <code>code or keyboard style </code> and it is an inline code which can <code>sit inside of regular text. </code></p>

This is pre, another form of code or keyboard style but it follows the formatting on the HTML sheet and doesn't wrap or sit inline with the regular text.

<pre>This is pre, another form of code
or keyboard style but it follows
the formatting on the HTML sheet
and doesn’t wrap or sit inline
with the regular text. </pre>

Special Text Classes

There are times when you want a certain line of text to stand out and look different from the rest, or a box border to change from blue to green. We’ve created a range of class selectors which change the color of all the selectors within the class. We use this occassionally to provide emphasis.

< pre class=”navy”>This is pre font style
but the color is forced to be navy.</pre>

There are times when we want something to be forced to be bold even though it isn’t normally, so we have a class selector set to be bold.

.bold {
font-weight:bold}

<p class=”bold”>There are times when we want something to be forced to be bold even though it isn’t normally, so we have a class selector set to be bold.</p>

Font-Size

When the design calls for it, we will change the size of the fonts. Rather than using forced font sizes, such as 14pt, we use relative sizes based upon the default font size which is set at 1em, approximately 12pt. The variable relative font size is represented by a percentage or fraction of the default. Using relative font sizes allows users with their own style sheets to overwrite ours for their special needs, and it allows flexibility for those who require larger or smaller fonts for better reading, controlled by the Internet browser (From the menu, VIEW, FONT-SIZE).

There are various ways to use these special sized fonts. They can be set in classes to be used with divisons or spans. Here is an example of each:

<p class=”medium”>This is a medium-sized font.</p>

<div class=”medium”>This is a medium-sized font.</div>

<p>This is normal type with a <span class=”medium”>span of medium type </span> in the middle.</p>

Let’s look at the specific CSS rules for a few of our special font sizes.

External Links

We feature several thousand links to sites away from our own. Part of compliance with web and accessibility standards is designating which links are internal and which are external. External links will take the user away from your site. Because we have so many external links as part of the overall flow of our articles, we decided to clearly mark all external links with a dotted blue line underneath the link, a technique becoming very popular among web designers. Our policy states that these links will open in a new window, leaving our article still accessible to the user so they can continue to read on and not let the flow of the article be lost while still accessing the external information.

Because we set the overall look of the links previously, the external class rule merely adds the modification of a bottom dotted border for both the link and visited link.

<p>This is an example of an external link to <a title=”external site” href=”http://www.cnn.com/” class=”external”>CNN</a>, the popular news site.</p>

Designing Our Footer Links

Our footer features some interesting links and hovers, adding a little drama to our page design. As mentioned, we want our links to stand out when the mouse passes over them (hover) but we wanted something a little different with our footer.

The hover links within our content feature a light blue color with a top and bottom border of dark blue (Move the mouse over any links in this paragraph to see the design). We changed this in our footer to create the same light blue background of color but with dark blue borders on the left and right sides of each hover link instead of the top and bottom. It is still consistent but different, adding a bit of fun to the design.

Note: Notice the references to accesskey. These are the tab order in which someone can tab through a page to the most important links. These were left in to remind you to create accessible pages to comply with web standards. The order of the accesskeys is based upon your own design.

Want More?

In our first section, we examined the innovative layout that we developed for our web pages. In the next section, we tackle the graphic fun of lists and boxes to add drama to your design. Then, we show you some of the little details we use to make our pages look special including the use of invisible text, forced white space, floats, and dealing with Internet browser software bugs. Our last section on CSS and HTML is on the tips and tricks we learned while changing and updating these pages.

Information

Taking Your Camera on the Road is about the adventures and lessons learned along the way of Brent and Lorelle VanFossen as they hit the road full-time in 1996. We talk about photography, cameras, travel, RVs, and the places we've visited and lived along the journey.

For information on WordPress, please visit Lorelle on WordPress. You will find information on hiring Lorelle VanFossen for your web development and multimedia online publishing needs.