HTML And CSS Tutorial: Removing Links Underline

Home » A Link Without Underline Css » HTML And CSS Tutorial: Removing Links Underline

Maybe your like

REMOVING LINK UNDERLINE

GENERAL TECHNIQUES

USING CASCADING STYLE SHEET CSS (Cascading Style Sheet) method is currently the most practical way to remove underlines from links. CSS only works on browsers that supports CSS. Currently, this means Netscape 4.0 or newer, and Internet Explorer 4.0 or newer. (Some of these browsers might not fully support all the CSS specifications, but most do support non-underlined links.)

Although there are several variations to the CSS method, it's actually very simple. Just remember that the underlines can be removed by setting the link style like this: text-decoration: none

The specifics are as follows:

1) Using inline style: This method is recommended if you want to remove the underlines on some (but not all) of your links. Just add STYLE="text-decoration: none" on the links that you don't want to be underlined. (You should include the quote signs like the example above.) For links that you want to keep underlined, use the regular <A HREF> tag. An example is shown below:

<A STYLE="text-decoration:none" HREF="link.html"> This is an unusual link, it has no underline</A>
 
<A HREF="link.html"> This is a normal link, it's underlined</A>
which produces something like these: This is an unusual link, it has no underline

This is a normal link, it's underlined

2) Using internal style-sheet: This method will cause all of your link to be not underlined, so you don't have to do it one by one. Put the following style definition between the <HEAD> and </HEAD> tags on the html file:

<STYLE> <!-- a {text-decoration:none} //--> </STYLE>

See an example.

3) Using an external style sheet: This method will be the most practical if you want to use the style accross different documents. You can avoid having to enter the style definition on every page by saving the style-sheet into a file. You can then include the file on every page that you want the underline to be removed. First, create a text file which contains the following:

<!-- a {text-decoration:none} //-->

Save the file and name it something.css Use any valid name that you want, but you must use .css extension.

Enter the following between the <HEAD> and </HEAD> tags on every document:

<HEAD> <LINK REL=stylesheet TYPE="text/css" HREF="something.css"> </HEAD>

Note that this assumes that something.css is the name of the text file which contain the style definition. By doing this, then anytime you create a link within the document, the link will not be underlined. That is: you can just code your link as usual like this:

<A HREF="link.html">This is a normal link</A>

and it will automatically not be underlined. (Note that the .css file does not necessarily have to be on the same directory as the html file; just make sure to put the correct path if it's not on the same directory.)

Caution It's possible to turn-off CSS on some browsers. For example, in Netscape 4.7, an user can turn style-sheet off from selecting Preferences->Advanced->Enable Style Sheet. Also, if user has destinated his/her own style, your style definition might be overridden. For this to happen, most likely the user need to define his/her style as !important. (If you don't know what this means, don't worry. Most browsers are set with default values; and most user don't define their own style sheet.)

USING IMAGES Other than using CSS, you can also have non-underlined links by using images. Use an image editor program to create images of the text, and then use the "images" as links. This is not very practical (multiple links must be saved separately, or use image maps), and may slow-down page loading.

OTHER WAYS It's also possible to use a Java applet and create the links as hotspots within the applet. Another popular way is to use a Flash movie. Neither of these two are recommended for casual use. They're not practical (having a Java applet or Flash movie for each text-link will be terribly messy and difficult to maintain). They also may require plug-ins, and in the case of Java, is not reliable. (Sorry, I like Java, but the browser support for Java is just not as popular as before.)

CONSIDERATIONS

Does user "rely" on underlines to identify links?

Historically, when graphical browsers were not as popular as today, many people were using text-only browsers, such as Lynx. On a text browser, there is no clear way to differentiate between "hyperlinks" and normal text, thus underlining becomes a necessity. This is the main reason of why the underlines are there in the first place. Why not use bold, italic, or color? It is because some of those ancient machines do not have the capability to display bold, italic letters. Some of the old machines are also monochrome (black and white, or green and green!) only.

Nowadays, proportionally, there aren't that many people that still use text browsers. I for one, don't know of anyone that still use it. But still, people have grown customized to underlined links. This means that users automatically associate underlined-text with links. If they see a link that isn't underlined, they might not know that it is a link.

For those reasons, before removing the underlines, there are few things to consider. First, is it a good idea to remove the underlines? Can user find links if they are not underlined? Second, consider what actual benefit would be gained by removing the underlines. It may be cool, but many user prefer to have ease of use instead.

For some sites, a common reason to remove the underlines is for artistic consideration ("the underlines make my page looks terrible"). This might be a good enough reason, depending on the purpose of the site. However, won't it be better not to sacrifice the usability? Again, the underlines are there for a reason. If they are removed, users might not know which part of the page (or the text) are links.

A careful thought is essential when doing something against the convention like this. Users are the ones who will eventually judge the site. Try the best not to confuse them.

The purpose of this is not to discourage from removing the underlines, but to present the tradeoffs, so one can make a better decision. And whatever you do, I strongly suggest not to underline text that are not links (use bold or different color, instead).

Related subject: Highlighting Links

<<INDEX>>

(C) F. Permadi

Tag » A Link Without Underline Css