7Fonts and CSS

Fonts (type faces) play a large part in the look and feel of a web page. Where no other changes are specified, browsers are programmed to use a default font:

<p>This is the default browser font (Times New Roman, black).</p>

This is the default browser font (Times New Roman, black).

While there is nothing wrong with Times New Roman, it may not be the typeface you are after for a particular website.

:: Website Fonts

Vital Information — what fonts can be used on a website? You can specify any font you like — but bear in mind that the user's browser can only display fonts that are on his/her computer; otherwise, his browser will select a default. As this can have pretty ghastly effects on website design, it is important include alternatives so that the browser can select from the fonts you specify.

Serif, anyone? There are two font defaults: serif and sans-serif. Serifs are decorative lines added to fonts (see image); sans-serif does not have these decorative lines ("sans" means "without" in French). We'll take up how to include these in a moment but, first, there's an important point:

No matter what font you specify for a web page, if it isn't installed on your website visitors' computers, they won't see it. Unfortunately, not all computers have the same fonts installed. The latest studies still show these to be the most commonly installed fonts on Windows, Mac and UNIX systems (but at least we have some in common!):

  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier
  • Courier New
  • Impact
  • Times New Roman
  • Trebuchet MS
  • Verdana

References:
Windows: http://www.codestyle.org/winfontresults
Mac: http://www.codestyle.org/macfontresults
Unix: http://www.codestyle.org/unixfontresults

There are two ways to change the default font in browsers:

HTML Font Styles

HTML font styles are the original method of changing the default font (which still works, by the way). This requires surrounding the text with a <font> </font> tags and specifying the font face (type style), size and color — in every paragraph, text selection or mid-sentence font change.

s

Note that we have added sans-serif to our font face selection:

<p><font face="arial, sans-serif" size="+1" color="#666666">This is a font.</font></p>

This is a font.

This can get pretty busy; note how the font tags are nested (it can actually get worse, but this is enough for illustration purposes).

<p><font face="arial, sans-serif" size="+1" color="#666666">This is a <font face="arial, sans-serif" size="+1" color="#red">font</font>.</font></p>

This is a font.

Repeating such coding across a website's pages is time-consuming, adds code and lengthens download time. If you ever want to change it, you'd have to edit each instance throughout the website — time wasted, same code bloat and same lengthier downloads. Or worse — you'd not make the changes because it's just too much work.

Yes, there is Search & Replace, but since the face, size and color specifications can be in any particular order, you'd have to ensure you'd caught all instances. There's something better, easier and faster, with additional control.

CSS Font Styles

Cascading Style Sheets: a "style" is a font style. Among other things, CSS is a method of specifying how to display fonts. The specifications "cascade" because later specifications override earlier ones, much as a later order overrides an earlier one.

The style specifications can be in each HTML page, or in a separate file or "sheet", allowing you to change all styles site-wide by editing the style sheet file.

Note: This page is not intended to be an exhaustive exploration of CSS, which is a very broad and complex subject. For our purposes, we'll address basic CSS font control for use in your websites.

So: CSS font styles are a shorter and sweeter method of controlling font display, and are supported by modern browsers. We'll address how they work, how to set up site-wide font control — and how to change it all by editing one file. Client doesn't like the Arial? Wants a new text color scheme? No problem! A quick edit, and you're done.

There are three ways to implement CSS styles; these take precedence or "cascade" as follows, with the last taking precedence over the first:

  1. inline styles (styles written inside an HTML tag, as above)
  2. internal styles (page-wide styles specified in the <head> tag)
  3. external stylesheet (website-wide; one stylesheet linked to from every page)

However, as with all things Web, we suggest that you test your results in multiple browsers.

:: Inline Styles

Inline styles are individually placed within HTML tags. The code differs slightly from HTML and, as with HTML <font> styles, you probably won't want to add this to all your pages. But, because CSS "cascades" — the last style taking precedence over earlier styles — inline styles can be used to change individual text elements, or where you've already specified a page-wide or site-wide style for an HTML tag. In this example, we've added a CSS inline style to the <p> tag:

<p style="color: #cc6699; font-size: 18px; font-family: verdana, arial, sans-serif">Inline style.</p>

Inline style

Note that you generally don't have to turn CSS styles off with a closing tag.

:: Internal Styles (page-wide)

CSS styles can be applied to an entire page.

Better yet: you can specify that they apply to HTML tags — and can also make up your own styles to be applied where you wish.

First, set up the CSS area in the <head> tag. First, we identify in a <style> tag that this is CSS:

<html>
<head>

<style type="text/css">
<!--

Styles go here
-->
</style>

</head>
<body>


:: Restyling HTML Tags

Next, let's assign a new style to the <p> tag, which will then take effect whenever the <p> tag is used without your having to do anything else. We're specifying color, font size, and the font family.

Notice that we use the "curly brackets" — { and } — in our style specifications.

Lastly, note that you can assign font sizes in points (pt) or pixels (px).

<html>
<head>
<style type="text/css">
<!--

p {color:#cc6699; font-size:12px; font-family: Arial, Helvetica, sans-serif}
-->
</style>
</head>
<body>


Results: the p style takes effect whenever you use a <p> tag — without adding anything else to the tag!

<p>This is the new p style!</p>

This is the new p style!


:: Classes — Custom Styles

We'll make up a custom style called to be applied where we see fit. Custom styles are called "classes". Note also that our custom style, .title, has a period in front of it, which indicates that it's a class. You can name classes anything you like, but don't forget the period!

<html>
<head>
<style type="text/css">
<!--
p {color: #cc6699; font-size: 12pt; font-family: Arial, Helvetica, sans-serif}

.title { color: #cc6699; font-size: 17px; font-weight: bold; font-family: arial,helvetica,sans-serif}

-->
</style>
</head>
<body>

To use our custom style or "class", we add it to an HTML tag using the "class" specification; note that we do not use the period when inserting it into the HTML — and that it can be added to a tag that already has an assigned style:

<p class="title">This is the p tag with the Title class added.</p>

This is the p tag with the Title class added.

Changing Internal Styles is simple: just change the styles in the <head> tag.

:: External Styles (site-wide)

CSS styles can be applied to an entire website, by moving the styles from the <head> to an external file (or "stylesheet"), and linking all the HTML pages to the stylesheet via a notation in the <head>: Notice that, for this link, it uses the href tag:

<html>
<head>
<link rel="StyleSheet" type="text/css" href="yourstylesheet.css">
</head>
<body>

Notes: the stylesheet file name must end in .css.
Make sure that the link to the stylesheet is correct; that is, if stylesheet.css is in your root or "main" folder, then pages in subfolders should reference it as href="../stylesheet.css" to indicate that it is one folder up.

The coding for styles in the stylesheet itself is the same as for inline styles without any other notations:

p {color: #cc6699; font-size: 12pt; font-family: Arial, Helvetica, sans-serif}
.title {color: #cc6699; font-size: 17px; font-weight: bold; font-family: arial,helvetica,sans-serif}

That's all it takes!

Changing External Styles is simple: just change the styles in the stylesheet, and the entire site now reflects your new styles. This can be a real boon when developing websites, or when you wish a quick change. One change to the external stylesheet and — presto! — the entire website has changed.

:: Span Tag

It may be that you need to apply a style to a portion of text only. The span tag will allow you to do that. Let's assume we've made a class called ".text" which specifies the Arial font, and a class called ".highlight" that is bold, italicized and red. Notice that there is a closing </span> tag.

<p class="text">This is a <span class="highlight">demonstration</span> sentence.</p>

This is a demonstration sentence.

:: A (Short) List of CSS Styles

This is a very short list of CSS stylings:

  • color — HTML colors (e.g., #666666)
  • font-size — [px or pt or percentage or em]
  • font-family — your choice
  • font-weight — [bold, normal]
  • font-style — [italic, normal]
  • line-height — [px or pt — number of pixels or points between lines]
  • letter-spacing — [ Xpx or -Xpx — number of pixels between letters]
  • text-decoration — [none, underline, italic, overline, line-through]

A more complete list can be found at the w3schools.com website, which bases its information on the standards set by the World Wide Web Consortium (w3.org), the organization charged with arriving at browser standards. I also like htmldog.com for its simplicity.

Bear in mind that not all browsers support CSS; always test your pages in multiple browsers. Which ones? It depends on what your audience uses.

:: Links

To make links match your styles, classes can be applied to links via the a href tag.

<p>Here's a <a href="newpage.html" class="title">link with a class added.</a></p>

:: Text Rollovers

"Rollovers" normally refer to images that change when you cursor over them, like a menu button that looks depressed when you cursor over it. What actually happens is that, when you cursor over the original button, it is "swapped" for another image:

Such a menu requires the original set of button images, a set of "depressed" button images, and a whole pile of code to effect the switch between the two. This causes your overall page size and page download time to increase (cutting down on your leeway for using other images) — and requires messing with images whenever you want to change the menu.

Fortunately, CSS gives us some tools here, too: the ability to cause a regular text link to change appearance when you cursor over it. In CSS, this effect is called hover. To demonstrate, we'll make a menu link. Let's assume that we don't want the menu links to be underlined initially:

.menu {color: #247F7F; text-decoration:none; font-weight:bold; font-family:arial, sans-serif}
a:hover {color:#cc0000; text-decoration:underline}

The code for the link itself (note that the CSS class is applied to the link rather than the <p> tag):

<p><a href="0-intro.html" class="menu">Home</a></p>

Now, cursor over our menu link: Home
[Note: Since text rollovers do not display in Adobe Acrobat,
you can view them in our menu at DianeV Web Design Help.]

Our "hover" style above is applied to a ... that is, all a href tags. If you want to assign separate "rollover" styles to regular links and menu links:

a:hover {color: #cc0000; text-decoration: underline}
a.menu:hover {color: #ff0000; text-decoration: underline}

CSS Issues:

  • Nowadays, modern browsers support CSS, which couldn't be said years ago. However, they may implement styles differently. Always test CSS styles in multiple browsers, and decide what you can live with. We've been able to design websites where all the browsers displayed identically; you very likely can too.
  • Multiple CSS styles applied to piece of text may interact with each other; for instance, an Internal or External stylesheet may specify that the H1 tag is Arial, and an inline style may say that it is blue.
  • CSS "button" rollovers are not supported in all current browsers, so we are omitting them here.
  • Website usability testing shows that CSS rollover links can be un-underlined in in areas that are clearly menus; however, using them in the regular text areas can be confusing to users. No matter how fancy we can get, it's always best to ensure that a user's time is best spent reading what a website says, rather than trying to figure out how to use it!

For more information about CSS (and great usage examples), visit w3schools.com. If you like CSS, prepare to be thrilled!

 

  1. The Learn Basic HTML Series:
    1. Learn Basic HTML and Web Page Construction
    2. What is HTML?
    3. HTML Page Structure
    4. Head Tag, MetaTags & Titles
    5. Adding Page Content
    6. Tables
    7. CSS and Fonts
    8. Putting It All Together
    9. Finale

DianeV Web Design Studio

© 1998- DianeV Web Design Studio. All Rights Reserved. :: Privacy/Legal/Return Policy. Any unauthorized reproduction
or distribution of the contents of this website is a violation of copyright law and may result in severe civil and criminal penalties.
Copyscape.com