8 Great CSS Tips and Tricks

Part of the CSS Web Design For Dummies Cheat Sheet

Even when using Cascading Style Sheets (CSS), building a functional (but still attractive) website requires careful execution and planning. Here are a few tips that will make your website stand out.

Let users control font size

Try to avoid specifying the body font size. Don’t do this, for example:

body {font-size: 24px;}

People have set their browser’s options to a text size that’s readable for them. You don’t know whether they’ve got a pixel resolution of 1680x1050 or 800x600 pixels. It makes a difference. The user should be the one to decide how big they want their text, not you.

Make sure your borders show up

Here’s a common CSS programming head-scratcher:

p {border: 12px;}

In spite of this rule that you wrote, no border shows up around the paragraphs. You’d logically think that by specifying a border size, you’d see a border. Not so. Unless you also specify a border style, you don’t get a border. The default style is none, so change it to include a style:

p {border: solid 12px;}

Watch out for color clash

What if you specify a text color, but fail to specify a background color? Sounds harmless, but it can be a problem. Some users employ personal style sheets, including their favorite colors. What happens if a user specifies brown for their backgrounds and white for their text? Say that you specify brown for your text:

BODY {color: brown;}

The user won’t see your text at all because their background color and your foreground (text) color are identical. The solution? Always specify a background if you’re going to color the text. Then you have control over how the text looks against that background:

BODY {color: brown; background-color: yellow;}

Timing blurring and other effects

Combine timers, scripting, and filters to create lots of dynamic visual effects. Try this cool effect in Internet Explorer:

Imagine this effect moving, as if the shadow were slowly growing.
Imagine this effect moving, as if the shadow were slowly growing.
<html>
<head>
<script LANGUAGE="VBScript">
dim counter
function startTimer()
       timerhandle = setInterval("sizeit",130)
end function
function stopTimer()
       clearTimeout(timerhandle)
end function
function sizeit()
counter = counter + 1
if counter > 49 then counter = 1
n = "blur(add=1, direction=125, strength=" & counter & ")"
divider.style.filter= n
end function
</script>
<style>
div {position: absolute; filter: blur(add=1, direction=15, strength=90";}
</style>
</head>
<body onload="startTimer()" onunload="stopTimer()">
<div id="divider">
<h1>This is a blur effect over time.</h1>
</div>
</body>
</html>

Try varying the speed of the filter by adjusting the value 130 in this line:

       timerhandle = setInterval("sizeit",130)

Find A List Apart

One source for excellent ideas, samples, and articles — submitted by some of the most talented web designers around — is A List Apart, which has a forum dedicated to CSS.

Using your own bullets in lists

With CSS, designing custom bullets in a graphics program and then assigning them to list items is easy. The following code produces the result shown in the figure that immediately follows it.

Add custom-designed bullets to your lists the easy CSS way.
Add custom-designed bullets to your lists the easy CSS way.
<HTML>
<HEAD>
<style>
ul { list-style-image: url("mybullet.jpg"); font: 32px; } 
</style>
</HEAD>    
<body>
<ul>
<li>first
<li>second
<li>third
</ul>
</body>
</html>

Specifying graphics locations

If you store a graphics file in the same folder as your .htm or .html file, the HTML code needs only the name of the graphics file, like this:

list-style-image: url("mybullet.jpg")

However, if the file is in another location, you must provide the path to that location, and do some bizarre punctuating as well — adding a ///, for some reason. This next example finds this file in the root directory of the c: drive:

list-style-image: url("file:///C:\mause.jpg")

Here’s a file located in the \photos subdirectory of the f: drive:

list-style-image: url("file:///F:\Photos\mause.jpg")

Here’s the additional bizarre punctuation (///\\) you must add for a local network location:

list-style-image: url("file:///\\Hp\servr\PHOTOS\mause.jpg")

If you keep your graphic files on an Internet site, provide the URL address.

Lastly, if your graphic file is stored on the space shuttle, use this punctuation:

"file:///\\\\\\\/^^^\\outerspace\servr\PHOTOS\mause.jpg"

The same punctuation and conventions are used when specifying the src= attribute to load a graphic into an HTML <img> element.

You might not see some of your graphics when you move your web pages from your local computer to a server to post them on the Internet. If that happens, check file paths to ensure that the graphics files are located where your code says they are. The simplest tactic is to just keep all dependency files (such as graphics files) in the same directory as your .htm and .css files. That way, you can use relative paths, meaning you don’t specify any path at all in your code, just the filename. The browser understands it should look for your graphics in the same path that it found the HTML file.

Combining classes

You can save yourself some time and trouble by defining classes that are later combined, like adjectives combine with nouns. Say that you want some of your paragraphs framed in green, some in blue, and others in pink. You could create a separate class for each kind of paragraph, or you could be clever and create a general border style class, and three additional classes for the coloring. Here’s how it works. First, you create four styles, and then you combine the class names in the HTML elements when you use the class= attribute:

<HTML>
<HEAD>
<style>
.framed { 
           border: solid 3px red;
           padding: 6px;}
.pink { background-color: pink; }
.blue { background-color: blue; }
.green { background-color: green; }
</style>
</HEAD>    
<body>
<p class="framed green">
You can save yourself some time and trouble by defining classes that are later combined, like adjectives combine with nouns.
</p>
<p class="framed blue">
You can save yourself some time and trouble by defining classes that are later combined, like adjectives combine with nouns.
</p>
<p class="framed pink">
You can save yourself some time and trouble by defining classes that are later combined, like adjectives combine with nouns.
</p>
</body>
</html>
blog comments powered by Disqus

SERIES
CSS Web Design For Dummies Cheat Sheet

Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.