-2

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:

enter image description here

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;
}


/*]]>*/-->
Adriano
  • 3,788
  • 5
  • 32
  • 53
smilingbuddha
  • 14,334
  • 33
  • 112
  • 189
  • 2
    Would you be able to show us the html markup relative to the anchor element? I have the suspect the underline is due to a `border-bottom` rather than a `text-decoration` – Adriano Nov 05 '18 at 03:09
  • It is very had to solve the problem if we don't have enough information to replicate the issue. A [MCVE] would be helpful. The code you have provided works : http://jsfiddle.net/ey6zfu1b/ . You could also use the browser developer tools (F12) to inspect the element to see where applied styles are coming from. – Jon P Nov 05 '18 at 03:27
  • @smilingbuddha, if you could provide the HTML code it would very helpful. – Adriano Nov 05 '18 at 03:34
  • Underlining of links has been the default since the 90s. Good to see you've caught up. – Rob Nov 05 '18 at 03:49
  • Possible duplicate of [How to remove the underline for anchors(links)?](https://stackoverflow.com/questions/2041388/how-to-remove-the-underline-for-anchorslinks) –  Nov 05 '18 at 04:01
  • @Rob Thank you! It's been a long journey. – smilingbuddha Nov 05 '18 at 04:02
  • @Adriano the underline in the OP's screenshot is definitely not a border. Borders don't look like that! – Mr Lister Nov 05 '18 at 07:25

3 Answers3

2

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/

Jon P
  • 19,442
  • 8
  • 49
  • 72
-1

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;

ACD
  • 1,431
  • 1
  • 8
  • 24
-1

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: none; 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: none !important;

Brian Jerez
  • 1
  • 2