For the most part, font selection for the Web is limited. There are only a select few fonts that are available on all platforms, and even when we say cross-platform fonts, we really mean just Macintosh and Windows. We forget all about Linux, other desktop operating systems, and portable systems as well. Personally I tend to reach for Verdana, Georgia, Trebuchet MS, and Lucida Sans. Verdana is probably the best choice for web fonts and more preferred than Arial. I like to replace Times with Georgia as well, as Georgia looks cleaner and more distinct to me than any of the Times fonts. For medium to large headings Trebuchet MS and Lucida Sans are more appealing, than Verdana.

To learn more about type for the web, read Joe Gillespie’s All You Wanted To Know About Web Type. This article from Web Page Design For Designers is still a must read for web page design.

Once you know which fonts to use, you need to know what CSS can do for you. Garrett Dimon’s CSS Typography mentions some concepts to keep in mind when styling fonts. The most important idea to grasp being that white space and headings make web pages easier to read.

ShareThis

Do you need a simple CSS layout or perhaps you want to see some examples of how you would style a data table? Or let’s just say you need to be inspired a little before your next CSS revision.

CSS Data Tables

Chris Heilmann’s site: ICant.co.uk, has an impressive CSS Table Gallery from multiple authors.

Instant CSS Layouts

For an online layout generator, check out InkNoise.com’s Layout-o-Matic, which lets you design a layout from a variety of options and then use the code for your own project.

ShareThis

This is part one of How To Add Style Sheets To Your HTML. We will cover the basics mostly, but the idea is that there are always multiple ways to do something, and many web designers do in fact vary their methods of how they add CSS to their html code.

Method 1: In the beginning…

This is by far the most common and the default way to add style to your html document. You simply link to your stylesheet in the HEAD section of your html document.

The optional media specifies the medium or media to which the style sheet should be applied to. The most commonly supported media type is “screen”, which is meant for computer screens. There are other options though, like print, for output to a printer, and aural and braille for speech synthesizers and braille tactile feedback devices.

(more…)

ShareThis

It is possible to create a simple navigation menu box with CSS. In fact I see this same style of menu for many of the templates for Mambo and WordPress. Here is a code sample of such a menu:

The end result is a menu without tables, that highlights when you hover over any of the links.

ShareThis

Here are a few basic CSS tips that you should learn if you are new to using stylesheets.

Basic Mouseover Color Links:

Note: Links should be specified in the following order:

• link
• visited
• hover
• active

Underline Effect for Headings:

(more…)

ShareThis