Three Quick CSS Tips and Tricks

CSS is a powerful way to style your website. You can do a lot of things with CSS - layout blocks, style your text, create pop-up menus.

There are so many options that one of the best ways to learn more advanced CSS techniques is to browse through tips and see what other people do. This article will introduce you to three moderate to advanced CSS techniques that you might not have thought of on your own.

Use Element Attributes Inside Your CSS Declarations

One cool trick is to use an attribute of your html element to further narrow down your CSS declarations. This can help eliminate the need for excessive class/id naming.

To do this, you include a CSS declaration like...

a [href="http://www.associatedcontent.com"]

You can do a lot of cool stuff with this - like styling internal links, styling e-mail links, and styling different types of inputs (like Submit buttons). For more info, read through this tutorial on how to style e-mail links using this css technique.

Create Tooltips Using CSS and No Javascript

Tooltips are a great way to tell your user more about something - like a link, an image, or a form element. HTML comes with some built in tooltips, but you can only use these for links. Javascript can also be used to create advanced tooltips, but this requires client-side scripting.

Using some advanced CSS, you can create tooltips. This makes use of a few css techniques - display:none/display:block, positioning, and the a:hover element. It takes a bit to explain this, so you're better off reading the full tutorial on creating tooltips.

With this technique in hand, you can easily create tooltips that you can style - without worrying about whether or not the user has client-side scripting turned on.

Create Pseudo-3d Buttons Using Borders

The last trick allows you to create a 3d effect for buttons that you create using only simple css and a gradient backgruond image.

By giving your image specially colored borders - dark on one side and light on the other - you can create the illusion of depth. Put that color theory and art school to work in web design. If you add a gradient image as a background, you can enhance that illusion and give the button greater depth.

To see an example button and the full css code to this, check out this tutorial on creating 3d buttons in css. This simple technique saves you the trouble of creating tons of images for each button you want to have on your website.

Well there you have it. Three CSS tips and tricks to help jazz up your site. Remember - there's always more cool things you can do with CSS, you just need to keep looking for tips and tricks.