by WebKeyDesign | Mar 7, 2006 | CSS
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.
by WebKeyDesign | Nov 28, 2005 | CSS
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.
by WebKeyDesign | Sep 1, 2005 | CSS
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.
<head>
<link rel="stylesheet" href="http://www.domain_name.com/style.css" type="text/css" media="screen" />
</head>
<body>
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.
Method 2: Embedded Style Sheet
Perhaps not the most efficient, because it makes your html document larger, and you lose the benefit of being able to effect other html documents, but still a popular method is to simply add your style information to the html HEAD section.
<head>
<style type="text/css" media="screen">
body {
background: #a9ac99;
font-size: 13px;
font-family: 'Trebuchet MS', Verdana, 'Lucida Sans', Helvetica, sans-serif;
}
</style>
</head>
<body>
</body>
This method is helpful too, in cases where your html document has a unique section which other html docs will not have, and you do not want to change your main stylesheet.css file. You can add just the css you need after the normal linked style.css like so:
<head>
<link rel="stylesheet" href="http://www.domain_name.com/style.css" type="text/css" media="screen" />
<style type="text/css" media="screen">
#special_section {
font-size: 12px;
}
</style>
</head>
Method 3: Inlining Style
Sometimes, you have worked all day on getting something to look great and then you find out that your style looks awful in Internet Explorer, so you cheat and use inline style. This is where you add the style information to the element itself, like so:
<p style="color: #666666; font-family: serif;"> This means I'm too tired to fix it in IE.</p>
This is not very flexible but it does fix some problems very quickly. However you should not rely on inline style very often because it makes the html document not very readable in other media, like braille, or even print.
Inline styles are userful in troubleshooting stylesheet problems, but just remember not to implement them as an actual solution.
by WebKeyDesign | Aug 15, 2005 | CSS
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:
#menu_box {
width: 200px;
font-family: Verdana, Helvetica, sans-serif;
border-top: 1px solid #666666;
border-bottom: 1px solid #666666;
}
#menu_box ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu_box li {
border-botom: 1px solid #666666;
}
#menu_box li a {
display:block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #0066CC;
border-right: 1px solid #666666;
background-color: #CCCCCC;
color: #FFFFFF;
text-decoration: none;
}
#menu_box li a:hover {
background-color: #0066CC;
color: #FFFFFF;
}
The end result is a menu without tables, that highlights when you hover over any of the links.
CSS Menu Demo and CSS Menu StyleSheet
by WebKeyDesign | Aug 12, 2005 | CSS
Here are a few basic CSS tips that you should learn if you are new to using stylesheets.
Basic Mouseover Color Links:
a:link, a:visited {
text-decoration: underline;
color: #0000FF;
}
a:hover, a:active {
text-decoration: none;
color: #DC143C;
}
Note: Links should be specified in the following order:
- link
- visited
- hover
- active
Underline Effect for Headings:
h1 {
font: Verdana, Arial, sans-serif;
padding: 3px;
border-bottom: 1px solid #000000;
}
Basic Indent For Paragraphs:
.indent {
padding-left: 20px;
}
In the html code you would simply use the paragraph tag like this:
<p class="indent">This is my paragraph text.</p>
Use Images For List Bullets:
ul {
list-style-images: url(image_name.gif);
}
This should make all of the li tags inherit the setting.
by WebKeyDesign | Jul 13, 2005 | CSS
I was working on making a simple CSS template that would have a header, a sidebar, a content area, and of course a footer. The result being this simple template that has a fixed left sidebar.
Feel free to download it.
It is available on the WebKeyDesign Forum.
If you are looking for a basic template for text only pages, check out the Beginner’s CSS Template. This template is good for those privacy notices, and other legal pages that don’t have graphics and such.
