Some Simple CSS Tricks

I started out building websites the old fashioned way, using tables. Every once in a while on a warm, clear spring day, I long for the days of the table based site. Then I have to wade through the markup of an old table based site, my vision goes blurry and a crushing sense of dread overtakes me. It was a glorious day when I made the switch, although there were some bumps in the road at first.

When I started out authoring CSS based websites, there were a ton of little tips that I didn’t know and didn’t figure out until someone “in the know” clued me in. I found myself saying things like “well, that makes perfect sense, why didn’t all the books and websites I read tell me this?” Maybe I should have figured all this out on my own, but it’s always nice to get a helping hand. Here are some little tidbits I have picked up on the way. Learn them. Breathe them in. Live them.

  1. Find a naming convention and stick to it. Whether it’s styleName or style_name or style-name, go crazy, just keep it the same throughout. Try not to name any style according to where it is on the page (i.e. leftSidebar) as that might change late in the game when the client requests that the sidebar be moved from the left to the right. That sidebar is no longer described correctly and should be changed in the markup as well, therefore defeating the purpose of using stylesheets in the first place. This could definitely be its own post, so I’ll leave it at that.
  2. Use the handy dandy wild card to zero out all of you margins.

    *{margin: 0;}

    If you’ve ever had a problem with your margins looking great in IE and horribly off in FireFox, this is the reason why. Put this little style on the top of your style sheet and most of the problems you’re having will be solved.

  3. This one goes out to the PC users. Always give your site a background color, even if the background is going to be the default white for most browsers. FireFox on the Mac decided that the default color ought to be some crazy light blue. If you never test on a Mac, you’ll never pick up on this quirk.
  4. Learn the shortcuts quickly. Coding a background style or a border style can be cumbersome if you separate the characteristics one-by-one. The style becomes clunky. An example:

    #contentMain {background-color: ##ccc; background-imageL url(../images/backgroundimage.gif); background-repeat: no-repeat; background-position: bottom right;}


    #contentMain {background: #ccc url(../images/background.gif) no-repeat bottom right}

  5. Microsoft Internet Explorer is the only browser that reads an underscore before a property. FireFox and Safari will ignore the style and go right down to the next one if the underscore is inserted. So if you have a style that is working in IE, but not FireFox or Safari such as inline-block, put an underscore in there (see below) and see if that helps.

    .contentThumbs {_display: inline-block;}

That’s it for now. I’ll have some more tips on CSS or driving down Belmont or solving global warming next month. If my five little steps haven’t helped you out, please check out a few of the resources that have been invaluable to me:

Site Point
A List Apart

Other News

How to Set up Site Kit in Your WordPress Site

Set up Site Kit in Four Quick Steps From your WordPress dashboard, navigate to "Plugins" and click on "Add New." Search for "Site Kit by Google" and install the plugin developed by Google. After activation, you'll be prompted to connect your WordPress site with your...

Important: Your Old Google Data Will Be Deleted

After more than 15 years, Google's previous data tracking model is finally getting a much-needed upgrade. The modernization of GA4 is driven by three key factors: A new data model that works seamlessly across devices Ability to function in a "cookieless" environment...

Installing Google’s Site Kit WordPress Plugin

In the ever-changing digital landscape, website owners strive to maximize their online presence and make data-driven decisions to enhance performance. For WordPress users, harnessing the power of Site Kit by Google can make their jobs a lot easier. This free plugin...

Why It’s Important to Keep Your WordPress Website Updated

At ReachFarther, we believe that keeping your WordPress website updated is essential to the success of your online presence. Many website owners overlook the importance of regular updates, but failing to do so can lead to a host of problems, from security...