Css Articles | Web 2.0 Css Templates

How to style external links with css

admin » 17 July 2008 » In Css Articles » No Comments

You’ve probably seen it on many pages, and wondered how they style only external links in a special way. The most used method is to add a a small image on the right side of the link, to show the user that the link is an external link.

It’s also possible to show the user that the link refers to a pdf, word file etc. I’ll show you both how to style to an external link and to a specific file type.

This is how you can style a link to an external site, using css:

[-]^?View Code CSS

a[href^="http:"]
{
background: url(images/yourimage.gif) no-repeat right center;
padding-right: 1em;
}

What happens here, is that the “^” character allows you to target an attribute that starts with a specific text, in this case “http:” - which of course is an external link.

And this is how you would do it if you wanted to style a specific type of file link, in this example all the pdf files that are downloadable, would have an image to the right of the actual link:

[-]^?View Code CSS

a[href$=".pdf"]
{
background: url(images/yourimage.gif) no-repeat right center;
padding-right: 1em;
}

This is a nice and easy technique to make your text and links a little more stylish. I’ve attached a zip file containing all the icons as you can see on the below picture. Should be enough to get you started. Good luck.

Icon links (30.6 KiB, 5 hits)
You need to be a registered user to download this file.

Pure css tooltip

admin » 17 July 2008 » In Css Articles » No Comments

To save both space and frustration, it is often wise to use css tooltips to show a small popup with some helping words to the readers of your webpage. It’s very easy to make, looks great, and you keep your readers from dissapearing from your site.

How to make the css tooltip:

You have to put the tooltip text inside the span attributes. The html look like this:

[-]^?View Code HTML4STRICT

This is just some text, and if you <a href="#">Roll your mouse over here <span>Then this text will show as a pure css tooltip</span></a> which is pretty neat!

And the css looks like this:

[-]^?View Code CSS

a{
z-index:10;
}
a:hover{
position:relative;
z-index:100;
}
a span{
display:none;
}
a:hover span{
display:block;
position:absolute;
float:left;
white-space:nowrap;
top:-2.2em;
left:.5em;
background:#fffcd1;
border:1px solid #444;
color:#444;
padding:1px 5px;
z-index:10;
}

So now you know an easy way to show really nice and helpful tips to your users, with the help of only pure css tooltip. Good luck!

What is css

admin » 16 February 2008 » In Css Articles » No Comments

CSS means Cascading Style Sheets. CSS is a system of rules that directly effect the display properties of your web pages such as colors, fonts and layouts. CSS style blocks are also commonly referred to as rules. These rules can be embedded into an individual HTML page or placed in an external file that will control many individual pages on your website. Thus changing a property in one place in the linked style sheet will immediately make that change on every web page that is linked to it.

“CSS Web Template” is a website design created using Cascading Style Sheets (CSS) technology. Cascading style sheets provide web developers an easy way to format and to style web pages. CSS will be used even more because it is seen the same way by all browsers, making it the best option during the browser wars.

Web 2.0 Css Templates

Category > Css Articles

How to style external links with css

Pure css tooltip

What is css

Product Groups

Shopping Cart

Polls

Recent Posts

Categories

Information

Login / Register

Tag Cloud