What is an CSS Attribute Selector?

CSS provides a way to style elements based specifically on attributes of the link, rather than the type of element alone. For example, you already know that you can style a header element:

But you can actually get much more specific and style only header elements that have a title attribute:

You can take it even further, and only style header elements that have specific values of attributes:

What is unique about Email Links?

An email link differs from all other links because it always begins with “mailto:”, which is the command the browser uses to notify the operating system that the user wants to send an email to a specific email address with the default email program. We can use this similarity between links to our advantage, so that we can apply CSS styling to only email links.

Here is the rub:

That will target all links with an href that begins with “mailto”.

Finishing the styling

Now that we have those links targeted, we can do more than just make them blue. We can also make use of another powerful CSS technique, the “content” property. The content property literally allows you to add content to page elements, even content that you have pulled right from it’s own attributes! Using a psuedo-selector, you specify where you wanted the content added, before or after.

Let’s get fancy and pull the title attribute from our links and append them after the link itself, on the links hover state:

That will work, but it’s going to append that text right after the link, so let’s make sure the formatting looks good and add a little spacing and a > character to seperate the link from text that will be added on rollover:

[VIEW EXAMPLE]

Most web browsers make resizing text an easy thing to do*, but not all web browsers will resize images along with that text**. Good web designers know this and go to great lengths to make sure their web layouts don’t bork when text is resized. But did you know you can make images grow and shrink along with the text?

The trick is to give your images a unique class and set their widths with an em value.
HTML:

CSS:

Now because you are forcing a specific width on this image, the web browser is in charge of doing the resizing, which is generally frowned upon. I tend to disagree though, I know that a web browser will never be as intelligent at retaining image quality as Photoshop, but the proof is in the pudding and I think generally web browsers do a fine job at it.

Read the rest of this entry »

Transparency is one of those weird things that is treated completely differently in all browsers. To cover all your bases, you need four separate CSS statements. Fortunately they don’t interfere with each other really, so using them all every time you wish to add transparency is no big hassle and worry-free. Here they are, and are currently set to 50% transparency:

UPDATE: I wanted to pull this post out of the archives and update it a bit because it there seems to be a good amount of interest in this subject.

Here is what each of those CSS properties is for:

• opacity: 0.5; This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards. Which, of course, they don’t.
• filter:alpha(opacity=50); This one you need for IE.
• -moz-opacity:0.5; You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.
• -khtml-opacity: 0.5; This is for way old versions of Safari (1.x) when the rendering engine it was using was still referred to as KTHML, as opposed to the current WebKit.