By default, whenever you add a link in your webpage, its underlined and displays in a different colour from the rest of the text. However, there might be times when you want to remove the underline. Here’s how to do it.

I uses the text-decoration property to remove the underlines from link text. By default, the browser will set it to underline. To remove the underline, all you need to do is to set the text-decoration property to “none”.

Is removing underline a bad idea?
Underlining links is a standard convention followed by all web browsers and, consequently, users expect to see links underlined. Removing the underline from links that appear within text can make it very difficult for people to realize that these words are in fact links, and not just highlighted text. There are other ways in which you can style links so they look attractive, and removing the underline is rarely, if ever, necessary.

Links that are used as part of a menu, or appear in some other situation in which the text is quite obviously a link—for instance, where the text is styled with CSS to resemble a graphical button—are a different story. If you wish, you can remove the underline from these kinds of links, because it should be obvious from their context that they’re links.

The purpose of CSS is to allow the designer to define formatting details such as fonts, element sizes, and colors, and apply those formatting to HTML pages. Show below are some of the different methods to apply CSS.

lnline Styles
The simplest method of adding CSS styles to your web pages is to use inline styles. Its applied via style attribute. Inline style do not require selectors. All you need is only a style declaration. It clearly identifies the element to which the style is to be applied. See example below.

The disadvantage of this method is they can’t be reused. In another way, its means if you want to apply the style above to another p element, you will have to type it again in that element’s style attribute. This will also make the page difficult to maintain. Its because once you would like to change a particular thing ex. the color element, you will have to go through all the styles and change one by one.

Embedded Styles
This style uses style element to apply to your web page. You can declare any number of CSS styles by placing them between the opening and closing <style> tags. See example below.

The type attribute specifies the language that you’re using to define your styles. CSS is the only language in wide use at the time of writing, and is indicated with the value text/css.

One of the disadvantage is, if you want to use your predefined styles throughout your website, you’ll need to add the style code at the top of every pages. Hence, what I would suggest is to use the external style sheet.

External Style Sheets
An external style sheet is a file with the extension of .css. It contains all your predefined styles. You can link to this file by inserting the below code into you web pages. The benefit of creating this file is, when you make a change to any style on this .css file, it will affect all the pages that links to it. Then you won’t have to bother to change page by page.

This is the code to link your web pages to an external style sheet.