Cheat Sheet

CSS Web Design For Dummies

From CSS Web Design For Dummies by Richard Mansfield

Cascading Style Sheets (CSS) works with HTML to simplify web page design. If you understand how to use CSS rules, you can specify a style once that can be applied to every page (or to every particular element) of your website. A list of tips and tricks can help all web designers build sites that are both appealing and that users will enjoy visiting.

How Cascading Style Sheets Improve HTML

CSS (Cascading Style Sheets) was a technology recommended by the World Wide Web Consortium (W3C) in 1996. An easy way to understand the purpose of CSS is to view it as an addition to HTML that helps simplify and improve web page design. In fact, some CSS effects are not possible via HTML alone.

Another advantage of CSS is that it allows you to specify a style once, but the browser can apply that style many times in a document. For example, if you want some of the pictures displayed in your website to have a thin, blue frame around them, you can define this frame as a style in your CSS. Then, instead of having to repeat an HTML definition of the thin and blue frame — each and every time you want that particular frame — you can merely insert the CSS style as an attribute for each graphic element that you want framed.

Put another way, you use CSS to define general rules about how the elements in your web pages behave and how they look — where they’re located, their size, their opacity, and so on. Then you can merely refer to the rule’s name whenever you want to enforce it within your HTML page.

Here’s a CSS rule that defines a couple of qualities you decide to apply to your largest headlines, H1:

<style>
H1 { font-size:16pt color:blue;}
</style>

With this CSS rule in effect, any HTML code containing an H1 element is automatically rendered in 16-point type and colored blue:

<html>
   <body>
      <h1>this headline is blue and 16 pt.</h1>
   </body>
</html>

CSS rules can be defined in a separate .css file or embedded within the HTML file. Here’s the CSS headline style rule embedded within the header of an HTML file:

<html>
   <head>
      <style>
h1 { font-size:16pt color:blue;}
      </style>
   </head>
   <body>
      <h1>this headline is blue and 16 pt.</h1>
   </body>
</html>

Notice the <style> element. You can define your CSS styles inside this element. (You can also have multiple <style> elements on a page if you wish.)

8 Great CSS Tips and Tricks

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>

The Parts of a CSS Rule

The following figure shows the parts of a CSS rule. This rule says, "Display in red the text of any paragraph <p> in the document with a class name attribute alert."

image0.jpg

You can make up any name for the class name (the writer of the preceding code chose alert), but the name in the CSS rule must match the name later used in the HTML attribute.

The following tables display common CSS properties and values.

Units of Measure
px pixels
em M-width
pt point
in inches
mm millimeter
cm centimeter
pc picas
ex x-height
The Font Properties
font
font-family
font size
font style
font variant
font weight
The Text Properties
letter spacing
word-spacing
line-height
vertical-align
text-align
text-decoration
text-indent
text-transform
The Border Properties
border-top-color
border-right-color
border-left-color
border-bottom-color
border-top-style
border-right-style
border-left-style
border-bottom-style
The Positioning Properties
position
top
bottom
right
display
clear
z-index
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.