Wsrtjtyk

In HTML it seems that the default behaviour is to underline web-links. That looks quite ugly in the HTML web page I am creating.

Is there a way to avoid the underlining throughout the web page?

Here is a piece of CSS code (gleaned from the web, I seem to have lost the source, sorry) which seems to be working nicely for me, except for the underlining:

body{

    background-color:#f4f4f4;

    color:#555555;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 26px;

    font-weight: normal;

    line-height: 1.6em;

}





<style type="text/css">

a:link    {

  /* Applies to all unvisited links */

  text-decoration:  none;

  background-color: #bbb;

  color:            blue;

  } 

a:visited {

  /* Applies to all visited links */

  text-decoration:  none;

  background-color: #ddd;

  color:            #f0f;

  } 

a:hover   {

  /* Applies to links under the pointer */

  text-decoration:  none;

  background-color: red;

  color:            #fff;

  } 

a:active  {

  /* Applies to activated links */

  text-decoration:  none;

  background-color: black;

  color: white;

  } 

</style>

It gives me links like this:

How can I modify the CSS to stop the underlining?

EDIT: Sorry there was another CSS code which was embedded inside the html file
exported from Emacs from org mode, which as ACD pointed out might be over-riding
the CSS code above. Unfortunately I am not very good at CSS at be able to recognize what the problem is :-D

<!--/*--><![CDATA[/*><!--*/



.title {

  text-align: center;

}



.todo {

  font-family: monospace;

  color: red;

}



.done {

  color: green;

}



.tag {

  background-color: #eee;

  font-family: monospace;

  padding: 2px;

  font-size: 80%;

  font-weight: normal;

}



.timestamp {

  color: #bebebe;

}



.timestamp-kwd {

  color: #5f9ea0;

}



.right {

  margin-left: auto;

  margin-right: 0px;

  text-align: right;

}



.left {

  margin-left: 0px;

  margin-right: auto;

  text-align: left;

}



.center {

  margin-left: auto;

  margin-right: auto;

  text-align: center;

}



.underline {

  text-decoration: underline;

}



#postamble p,

#preamble p {

  font-size: 90%;

  margin: .2em;

}



p.verse {

  margin-left: 3%;

}



pre {

  border: 1px solid #ccc;

  box-shadow: 3px 3px 3px #eee;

  padding: 8pt;

  font-family: monospace;

  overflow: auto;

  margin: 1.2em;

}



pre.src {

  position: relative;

  overflow: visible;

  padding-top: 1.2em;

}



pre.src:before {

  display: none;

  position: absolute;

  background-color: white;

  top: -10px;

  right: 10px;

  padding: 3px;

  border: 1px solid black;

}



pre.src:hover:before {

  display: inline;

}



pre.src-sh:before {

  content: 'sh';

}



pre.src-bash:before {

  content: 'sh';

}



pre.src-emacs-lisp:before {

  content: 'Emacs Lisp';

}



pre.src-R:before {

  content: 'R';

}



pre.src-perl:before {

  content: 'Perl';

}



pre.src-java:before {

  content: 'Java';

}



pre.src-sql:before {

  content: 'SQL';

}



table {

  border-collapse: collapse;

}



caption.t-above {

  caption-side: top;

}



caption.t-bottom {

  caption-side: bottom;

}



td,

th {

  vertical-align: top;

}



th.right {

  text-align: center;

}



th.left {

  text-align: center;

}



th.center {

  text-align: center;

}



td.right {

  text-align: right;

}



td.left {

  text-align: left;

}



td.center {

  text-align: center;

}



dt {

  font-weight: bold;

}



.footpara:nth-child(2) {

  display: inline;

}



.footpara {

  display: block;

}



.footdef {

  margin-bottom: 1em;

}



.figure {

  padding: 1em;

}



.figure p {

  text-align: center;

}



.inlinetask {

  padding: 10px;

  border: 2px solid gray;

  margin: 10px;

  background: #ffffcc;

}



#org-div-home-and-up {

  text-align: right;

  font-size: 70%;

  white-space: nowrap;

}



textarea {

  overflow-x: auto;

}



.linenr {

  font-size: smaller

}



.code-highlighted {

  background-color: #ffff00;

}



.org-info-js_info-navigation {

  border-style: none;

}



#org-info-js_console-label {

  font-size: 10px;

  font-weight: bold;

  white-space: nowrap;

}



.org-info-js_search-highlight {

  background-color: #ffff00;

  color: #000000;

  font-weight: bold;

}





/*]]>*/-->

In your edit, note .underline { text-decoration: underline; } , a class has been explicitly created and assigned to underline text. I would expect this is where your underline is coming from.

My preference would be to remove that class from any link elements with a class of underline.

Alternatively create a more specific selector

a.underline {text-decoration:none;}

which is better than using !important : https://www.smashingmagazine.com/2010/11/the-important-css-declaration-how-and-when-to-use-it/

It's clearly some CSS is overriding your CSS. Pink isn't the default color of links. Try using !important to your styles. e.g text-decoration: none !important;

There could be various reasons of why the styling in your web page behaves in such way.

1. The order of precedence rule, in which the browser will favor first the embedded styles then the link tag and lastly the style tag.
   Perhaps you have embedded styles within that specific links, or you're using an external css file which overrides the styles contained within the style tag



2. 
   

   The rules of cascading defined by the w3 in which it states that more specific rules override more general ones, perhaps you are making use of an external css file which contains an specific rule like the next one that overrides the styling rules inside the style tag

   
   
   

   p > a {
text-decoration: underline;
color: pink
}

   
   

but if you want an easy way to make all the links behave the way you intent them to you can use the !important rule beside the styling rule you want to override the rest

text-decoration: underline !important;