Get Help in Using CSS For Web Design

25 Cool CSS Tips

( Full credit to Dave Shea for compiling part of this crib sheet)

1. When in doubt, validate

When debugging, you may save yourself a lot of headache by simply validating your code first. Improperly-formed XHTML/CSS will cause many a layout glitch.

To validate your pages use the free tools provided by w3.org:

Validate XHTML (http://validator.w3.org)

Validate CSS (http://jigsaw.w3.org/css-validator/)

Build and test your CSS in the most advanced browser available before testing in others, not after.

If you build a site testing in a broken browser, your code begins relying on the broken rendering of that browser. When it comes time to test in a more standards-compliant browser, you will be frustrated when that browser renders it improperly.

Instead, start from perfection and then hack for the less able browsers. Your code will be more standards-compliant from the start, and you won’t have to hack as much to support other browsers. Today, this means Mozilla, Safari, or Opera.

2. When relying on floats for layouts, make sure they clear properly

Floats are tricky, and don't always do what you expect. If you run into a situation where a float extends past the border of the containing element, or just doesn't behave as you'd expect, make sure what you want is correct.

3. Try to avoid applying padding/borders and a fixed width to an element

IE5 gets the box model wrong, which really makes a mess of things. There are ways around this, but it’s best to side-step the issue by applying the padding to the parent element instead of the child that gets a fixed-width.

4. Avoid the Flash of Unstyled Content in IE

If you rely on @import alone for external style, sooner or later you will notice that IE ‘flashes’ plain, unformatted HTML briefly before applying CSS. This can be avoided.

5. Don't rely on min-width in IE

IE doesn't support it. But it treats width as min-width to a certain degree, so with a bit of IE filtering, you can achieve the same end result.

6. When in doubt, decrease widths

Sometimes rounding errors will cause something like 50% + 50% to add up to 100.1%, which ends up breaking layouts in some browsers. Try bumping down the 50% to 49%, or even 49.9%.

7. Content not showing up properly in IE?

You may be suffering the Peekaboo bug, especially if it does show up when a link is moused-over. See Position is Everything for the fix.

8. Be careful when styling links if you’re using anchors

If you use a classic anchor in your code (<a name="anchor">) you will notice it picks up :hover and :active pseudo-classes. To avoid this, you will need to either use id for anchors instead, or style with a slightly more arcane syntax: :link:hover, :link:active

9. Make sure your desired effect actually exists

There are browser-specific CSS extensions that aren't in the official spec. If you’re trying to apply filters or scrollbar formatting, you’re working with proprietary code that won’t work in anything but IE. If the validator tells you the code you’re using isn't defined, chances are it’s proprietary, and won’t work consistently across browsers.

10. Divide and Conquer: use commenting to turn off large sections of style

Especially useful when working on large, unfamiliar CSS files. Comment out roughly half of the CSS. If the problem still occurs, it's in the other half. Comment out what's left and test again. If the problem stops occurring, its in the commented out section. Refine your comment scope and test again. Continue until problem has been diagnosed.

11. Remember “LoVe/HAte” linking

When specifying link pseudo-classes, always do so in this order: Link, Visited, Hover, Active. Any other order won’t work consistently. Consider using :focus as well, and modify the order to LVHFA (or Lord Vader's Handle Formerly Anakin)

12. Remember “TRouBLEd” borders

Borders, margins, and padding shorthand assumes a specific order: clockwise from the top, or Top, Right, Bottom, Left. So margin: 0 1px 3px 5px; results in no top margin, 1px right margin, and so on.

13. Specify units for non-zero values

CSS requires you to specify units on all quantities such as fonts, margins and sizes. (The only exception is line-height, oddly enough, which doesn't require a unit.) The behaviour of any particular browser when sizes aren't specified should not be relied upon. Zero is zero, however, be it px, em, or anything else. No units are necessary. Example: padding: 0 2px 0 1em;

14. Test different font sizes

Advanced browsers like Mozilla and Opera allow you to resize text no matter which unit you use. Some users will definitely have a larger or smaller default than you; try to accommodate as large a range as possible.

15. Match cases between your HTML and CSS

Some browsers are case-sensitive. Using a class like 'homePage' is fine, provided you're consistent with your letter case. Applying style to 'homepage' will cause problems in strict user agents (like Mozilla).

16. Use the Text-transform Command

One of the lesser known, but really useful CSS commands is the text-transform command. Three of the more common values for this rule are: text-transform: uppercase, text-transform: lowercase and text-transform: capitalize. The first rule turns all characters into capital letters, the second turns them all into small letters, and the third makes the first letter of each word a capital letter.

17. Test embedded; launch imported

If you work with a stylesheet embedded in your HTML source, you eliminate any potential caching errors while testing. This is very important when working with some Mac browsers. But make sure to move your CSS to an external file, imported with @import or <link> before launching.

18. Add obvious borders to help debug layouts

A universal rule like div {border: solid 1px #f00;} can go a long way toward pinpointing a layout problem. But adding a border to specific elements can help identify overlap and extra white space that might not otherwise be obvious.

19. Don’t use single quotation marks around paths for images

When setting a background image, resist the urge to surround the path with quote marks. They’re not necessary, and IE5/Mac will choke.

20. Don’t link to empty style sheets as ‘placeholders’ for future style sheets (like handheld or print media style sheets)

Mac IE5 chokes on the empty style sheet and the page load time increases. Instead, have at least one rule (or perhaps even a comment) in the style sheet so that MacIE doesn't choke.

As well, here are some notable theory items that don’t particularly apply to the functionality side of things, but should be considered when developing:

21. Organize your CSS file

Make sure to comment blocks of CSS appropriately, group like-selectors, and establish a consistent naming convention, white space formatting (recommendation: a single space instead of a tab for cross-platform considerations), and property order.

22. Name classes/IDs based on function, not appearance

If you create a .smallblue class, and later get a request to change the text to large and red, the class stops making any form of sense. Instead use descriptive classes like .copyright and .pullquote.

23. Combine selectors

Keeping your CSS light is important to minimize download times; as much as possible, group selectors, rely on inheritance, and reduce redundancy by using shorthand.

24. Use External Stylesheets

Place your CSS rules in an external stylesheet, so that they do not need to be downloaded again each time a new page is loaded.

25. Highlight Navigation Code to show location

A lot of website's highlight the top level navigation element relating to each user's location within the site and this helps users to see where they are at any one time.

To achieve this, you'll need to assign a class to each navigation item. e.g.

<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="links">Links</a></li>
<li><a href="#" class="reviews">Reviews</a></li>
</ul>

You'll then need to insert an id into the <body> tag. The id should show where the users are located within the site, and should change when users move to a different page. When on the 'Home' page, it should read <body id="home">, on the 'Links' page it should read <body id="links">, and on the 'Reviews' page, <body id="reviews">.

Next, you create a new CSS rule:

#home .home, #links .links, #reviews reviews
{
all the styles for the highlighted navigation go here.
}

This basically creates a rule that only takes effect when class="home" is contained within id="home" etc and will only occur when the user is on the appropriate page of the site. These simple steps seamlessly create a highlighted navigation element.

Full credit to Dave Shea who prepared the major part of this excellent checklist Don't forget to visit Dave's CSS Zen Garden site to see a lot of really cool CSS designs.

Another good resource is the Adobe Dreamweaver Forums where you can find solutions to many CSS and browser compatibility issues - www.adobe.com.

Read more articles about PC repairs, Web design & SEO...