Document Links Styled with CSS Attribute Selectors

With CSS3 gaining popularity so are CSS attribute selectors. CSS attribute selectors have been around for some time however CSS3 adds more selectors to the mix bringing new light to subject. Increased browser support, with nearly every major browser currently supporting attribute selectors (Internet Explorer 6 still struggles), has also added to the popularity.

So what benefit do CSS attribute selectors have to adding style to document links? CSS attribute selectors allow you to quickly and easily add styles to document links while keeping your code clean and clutter free. Ultimately, the more attractive looking your links are the more clicks they will receive.

PDF Hyperlink Example

HTML Code

<a href="#.pdf" title="PDF File Link">PDF File</a>

CSS Code

a[href$=".pdf"] {
	background: url(acrobat.gif) no-repeat left center;
	padding-left: 20px;
}

Output

PDF File

Breaking Down the Attribute Selector

You start your CSS just as if your were to style any other hyperlink. Directly following the a element comes the attribute selector, in this case [href$=".pdf"]. The attribute selector will always be wrapped in [] brackets and will always sit right next to the element to which it applies to without any spaces in-between the two.

Within the [] brackets the href attribute is declared as we are specifically targeting hyperlinks. Next we insert the $= selector, which specifies that we only want to target hyperlinks ending with the file format value to follow. For this example we are using a PDF document making the value .pdf, which is wrapped in "" quotations.

To target any other type of document just change the value to what ever file extension you wish. As an example, to target Microsoft Word documents just change the .pdf value to .doc.

Taking It a Step Further

Chris Coyier from CSS-Tricks has put together and outstanding resource on CSS attribute selectors in his article “The Skinny on CSS Attribute Selectors”. To learn the full potential of CSS attribute selectors this article is a must read as it does a great job of breaking them down for you.

If you are worried about the lack of support for Internet Explorer 6 you can, with a some additional work, use CSS attribute selectors via jQuery. Zac Gordon has written a great tutorial, “Selecting and Styling External Links, PDFs, PPTs, and other links by file extension using jQuery”, on how to do so.

Adding an icon to your document links is a great way to quickly draw more attention to the link. InstantShift has put together an article packed full of icons. If you would like some to use on your website check out the article at “75 Free Useful Icon Sets for Web Designers and Developers”.

Related posts:

1. 6 Visual Optimization Mistakes
2. Top 10 Keyword Research Tips
3. iPhone Picture Messaging

I have never heard anyone say that a website could have too much traffic, it is unheard of. People are always looking to obtain more traffic - and rightfully so. But how do you obtain large amounts of traffic? Research shows that the majority of all traffic comes from search engines. And how do you show up in search engines? You target specific keywords and market your website or pages around these keywords. With this, ideally the more keywords you target the more traffic you will see. Follow these top 10 keyword research tips to make the most out of your targeted list of keywords.

1. Think like potential customers.

To even begin developing a keyword list you need to know and understand how potential customers are going to search for your product or services. What may be relevant and a common understanding to you may be completely over the heads of your clientele. Technical or specific terms you use might not even be searched. Always think like a potential customer when developing keywords.

2. Analysis any competitors.

It is always a good idea to know who you are competing against. Doing so will provide you with insight not only to how your industry is being marketed online, but to also new keywords and descriptions you may have never even thought about. Visit competitors websites, check their code, and make sure that you are not leaving out anything critical.

3. Use typos and misspellings.

It is not uncommon for people misspell words and phrases in their searches. While you may not want to place misspelled words on your web page for rankings it is possible to run pay per click on these words, and they are often cheaper than the correct spelling. A good tool to use to locate common misspelled words and typos see SearchSpell Typo.

Examples:
Calendar > Calender
Your > You're
Here > Hear

4. Use acronyms and abbreviations.

Acronyms and abbreviations make up a large amount of search traffic, thus making it important for you to make sure that your not missing any keywords. Many keyword generators will miss out on acronyms and abbreviations so be sure that you are doing this yourself to uncover your full potential list of keywords.

Examples:
9/11 > September 11th
SEO > Search Engine Optimization
PPC > Pay Per Click

5. Use multiple verbs.

Everyone has a different mindset when it comes to searching, therefore you want to make sure that you are using a contrast of different verbs.

Examples:
try to play
trying to play
try playing
trying playing

6. Use both plural and singular.

Using both plural and singular keywords will easily magnify your list quickly. Most major search engines will take in to consideration plural and singular forms within organic results however keep in mind if running a pay per click campaign Yahoo Search Marketing does not while Google AdWords does.

Examples:
mountain bike
mountains bike
mountain bikes
mountains bikes

7. Use compound, separated, hyphenated, and merged keywords.

Users often search trying multiple variations of words and spellings looking for the right fit. To be sure you are not missing out on any terms or phrases research compound, separated, hyphenated, and merged keywords.

Examples:
checkin > check-in > check in
startup > start-up > start up
lifesize > life-size > life size

8. Use locations.

One of the best ways to pick up traffic is to localize your keywords. If you are looking to pick up traffic on a national level create a few sub pages targeting localized keywords in the most popular areas. This will directly target your visitors and overall will increase your conversion rate if done correctly.

Examples:
Phoenix web design
Arizona SEO
Chandler, AZ artist

9. Use Adjectives

Numerous users will use adjectives in addition to the main keywords. This is a fast way to pick up keywords and even spark an immediate interest with users.

Examples:
Good, Better, Best
Far, Further, Furthest
Much, More, Most
Little, Less, Least
or Free, Cheap, Amazing, Pretty, New

10. Refine list.

After you have built your keyword list its quite possible that your list is far too big and contains some keywords that can be tossed out. Narrow down the list by selecting a good mix of both broad and targeted keywords directly related to the subject and theme of your website. Keep these keywords as you will want to rank for both. Remove any keywords that are not relevant to your website or keywords that you don't have enough content to support. Remember it is always possible to go back and add content and keywords later as well.

Get Started!

You can begin your keyword research for free using any of the following tools. These are great resources to help you find new keywords or get your pay per click campaign off the ground. However one thing to keep in mind, since these resources are free it is likely that your competitors are using them as well. For the best results be a little creative and thing outside the box when at all possible.

• Google Keyword Tool
• Wordtracker Free Keyword Tool
• Keyword Discovery Free Tool
• Google Trends
• SEO Book Keyword Suggestion Tool

Related posts:

1. Keyword Do's and Don'ts
2. Are Meta Tags Important?
3. 10 Quick E-Commerce Tips

It is amazing that with all of this technology and all of the advancements with cell phones over the past few years that the iPhone still does not have the capability to send picture messages. That is until now. The way it works is most mobile carriers offer free email to SMS/MMS gateways which forward email messages to phones. Therefore when you send an email from your iPhone to an email address specifically related to the recipients phone the email will be displayed on their phone as a picture or text message.

So how do you figure out what email corresponds to each phone? All you need to know is the person's cell phone number and carrier they are on. From here you will set up an email to be sent to [10-digit phone number]@[carrier gateway address]. Please refer to the table below for a listing major US carriers free email to SMS/MMS gateways.

For international and smaller US gateways please refer to:

• Tech FAQ
• Mutube

Related posts:

1. Working With A Bad Client
2. Smart Email Marketing
3. Designing A Non-Profit Website