Favorite CSS Tips & Tricks

[Cricket]

Once again, I am reaching out to our more experienced members, but this time I would like to hear about your favorite CSS tips and tricks. If you prefer, feel free to point us to articles or websites that you especially like to turn to for ideas and help, but please add your reasons concerning why you like these resources.

[Cricket]

Although they have way too many ads, CSSplay is still one of my favorite sites for finding ideas (the search options works great) for CSS. I especially like to browse through the demo page (look under photo galleries) for ideas on ways to display images. Why do I like the site so much? Because I can find so many different ideas (and the code) all on one site and can view a demo at the same time so I have a clear visual of how something will look.

[megamoose]

This is probably inappropriate, but you know what I'm excited about. For years I have been annoyed that IE6, if you have a display: block; variable in your CSS template, and a a:hover{} section, it will only "hover" when you hover over the text, not the "block".

I only recently discovered if you give the A a height of 1px, that overrides the problem. Of course this is only an IE6 problem ASAIK, but still excites me

A good website I'm interested in and have been following is http://www.css3.info/preview/
It shows the likes of what CSS3 can do, and it has some handy new features. Only problem is it's not used with older browsers and I think is still in development.

[HTMLBasicTutor]

When teaching or helping someone to solve a CSS problem:

1. w3schools CSS tutorials reference section is a great spot to learn the basics of CSS.
2. CSS 2.1 Specification properties list is another great reference when having troubles sorting out CSS problems (especially when people add properties to their styles that are not applicable to the HTML element they are formatting.
3. Comparing the HTML elements list at w3schools and the HTML elements list in the HTML 4.01 Specification (which forms part of the XHTML specification) with what the student is trying to style is a way to show the HTML element does not have the attribute they are trying to format.

Also understanding the following helps alot when CSS problem solving:

• block and inline elements
• how to group divs and spans
• which stylesheets to use and how they are applied
• the box model is a difficult concept for some to understand

My own tips:

• Don't design for a specific browser. Not everyone uses your chosen favourite.
• Choose a flexible font size so your design adjusts to suit your visitors visual needs. Not everyone uses the zoom in the bottom right of the IE window.
• Leave the default text-alignment of left as is. Centered and justified are hard to read on the Web. By the way, you don't have to spec alignment on the Web, left is the default. Save coding by leaving this spec out. The only time you need to set the alignment is for special cases of a block of text or trying to get a menu to line up.
• Be sure to set the background colour of all elements. Use transparent if you want the background behind the element to show through.
• Use hex numbers for colours, not named colours or RGB. #FFFFFF is white and #000000 is black.
• Make sure your colour contrast is good. Even people with good eye sight have troubles reading pages with poor colour contrast.
• Design your containers so they adjust for different screen resolutions.
• Select font styles that are available on both Windows and Macs. Keep away from fancy fonts. Some forget that joe/joesy average don't have Office or grahpic programs that add these fancy fonts to their machine.
• Stay away from hacks to make the page do what you want. The web is not print. You can't control a web page like you do printed material. Those hacks are going to come back to haunt you as browsers improve. e.g. when we went form IE6 to IE7 there a ton of broken sites. Hacks also add unnecessary coding to your CSS and web page coding.

[al-zabir]

I prefer -

w3schools.com - for beginners
cssplay.com - for tips & tricks
http://www.w3.org/Style/CSS/learning - better resource for css validation

Thanks

[csm]

It depends on what you want to achieve.

I would not go with CSS3 that much at the moment.

My tipps:

1. Think of using a CSS reset (like YUI or Eric Meyer's)
2. choose the right DOCTYPE
3. Check your stats for how much users are on IE6, not using JS, ... (if under 4% I would not take care of it that much)
4. Use tools like YSlow, PageSpeed, FireBug, ...
5. To check how your new site looks in different browsers I would go with browsershots.org

That's what I would check first.

Regards,

Michael

[HTMLBasicTutor]

An addition:

The way most people link CSS intended for different media types, such as screen, print, or handheld, is to use multiple files. The files are then linked either through link elements with a media attribute or through @import statements with one or more media types specified....

Continued: CSS efficiency tip: use a single stylesheet file for multiple media

[abajan]

Well, one of my favorite resources for CSS tricks is CSS-Tricks.com, of course! The videos are usually well presented and the author doesn’t edit out his mistakes.
A really cool trick is featured in a video posted there just today, about image switching using just CSS: No JavaScript required. How sweet is that?

[HTMLBasicTutor]

Originally Posted by abajan

A really cool trick is featured in a video posted there just today, about image switching using just CSS: No JavaScript required. How sweet is that?

That is cool!

[HTMLBasicTutor]

Creating Beveled Images with CSS Technique #4 looks like the one to use.

Background images, just as the name implies, are part of the BACKGROUND of a website, not part of the actual content. The most common place to add a background image to, is the entire canvas – aka the body tag

How to Add a Background Image with CSS

[HTMLBasicTutor]

Seeing the concept of margins and padding and how they relate to the box model is difficult for some people:

In the first of the CSS In depth series, we’ll be talking about margins, padding and the box model. Margins and padding are some of the most widely used styles in CSS, but are often the source of frustration in cross-browser compatibility....

CSS In Depth: Margins, Padding & The Box Model

[abajan]

Another excellent reference on all things CSS is MaxDesign. I find their tutorials easy to understand because of the heavy usage of illustrations. It’s the old adage: “A picture is worth a thousand words.”
The slide shows on the homepage are quite good but be sure to also check out the Floatutorial, Selectutorial, Listutorial etc.

[HTMLBasicTutor]

covering recommendations for IDs and classes

Best Practice for ID and Class Names