Technology

Ten Great CSS Tips and Tricks

Letting Users Control Font Size

I used this code in Chapter 15 and similar code elsewhere throughout this book. I’m changing the body font size from whatever is set as the default in the browser to 24 pixels. Don’t do it. 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 1680×1050 or 800×600 pixels. It makes a difference. The user should be the one to decide this issue, not you. Why did I do it in this book? Because it is a book.

Making Sure Your Borders Show Up

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

Watching 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.

Centering for Everyone

One method is to put an element inside a div, and then center the div (this works in Netscape or Mozilla or Firefox and so on, but not in Internet Explorer). Setting a div.’s margin to zero and auto, you effectively center it in all browsers except IE.

Timing Blurring and Other Effects

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

Debugging Script

Script and code-behind programming such as ASP.NET are such an important aspect of Web programming that you may want to know how to set breakpoints and otherwise debug scripts. Your best bet for IE work is to download the Microsoft script debugger from this location.

Finding a List Apart (Get It?)

One source for excellent ideas, samples, and articles — submitted by some of the most talented Web designers around — is to be found here.

You can find some really cutting-edge CSS tricks and techniques described here. And who knows? Maybe someday you’ll send in a cool idea or two of your own.

Using Your Own Bullets in Lists

With CSS, designing custom bullets in a graphics program and then assigning them to list items is easy. When you cut your custom bullet down to size by cropping it in the graphics program, leave some white space on the right size so that the bullet won’t butt right up against the text items.

Specifying Graphics Locations

If you store a graphics file in the same folder as yours .HTM or .HTML file, the HTML code needs only the name of the graphics file. However, if the file is in another location, you must provide the path to that location, and do some bizarre punctuating as well — adding for some reason.

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.

Lastly Comment

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 in the same directory as yours .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.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button