Skip to main content
designm19985728
Participating Frequently
November 8, 2017
Answered

No underline on link

  • November 8, 2017
  • 2 replies
  • 3463 views

I still don't understand half of this, so bare with me.

Several paragraphs have hyperlinks on the text. White background, black text, blue hyperlink.

Got an 'article' so i can have a coloured box with white text. This text needs to be a link. If i just make it into a link, it colours it the blue that the box background is (main colour across design). Found a way to have the text white.

<a href="link" style="color:white">

what i would also like is for this text (not the others) to NOT have an underline. However through my internet search, it says i should add 'text-decoration: none'. But when i add that in after  - style="color:white" - it has no effect.

What am i doing wrong?

    This topic has been closed for replies.
    Correct answer B i r n o u

    well I can't reproduce your trouble... here is a video demonstrating the point

    11.08.2017-11.33.36

    2 replies

    Nancy OShea
    Community Expert
    Community Expert
    November 8, 2017

    Why are you using inline CSS styles?  Ideally, your styles should be in an external CSS file to which all site pages are linked. 

    /**GLOBAL LINK STYLES**/

         a {text-decoration: none}

         a:link {color: blue}

         a:visited {color: black}

         a:hover,

         a:active,

         a:focus {text-decoration:underline}

    The exception to this is if you're creating HTML Emails.  Even so, the CSS above can be wrapped in <styles> tags within your <body> tag.

    Nancy O'Shea— Product User & Community Expert
    B i r n o u
    Legend
    November 8, 2017

    it seams that the initial question was targeting a specific type of link of an article... not all the anchor.. that wahat said the author (not others)

    so if the rule selector is A it will target all the anchor don't you think ?

    Nancy OShea
    Community Expert
    Community Expert
    November 8, 2017

    In that case we should target that selector and pseudo-class in the global CSS.

    /**ALL LINKS INSIDE THE ARTICLE TAG**/

    article a {color:white}

    Nancy O'Shea— Product User & Community Expert
    B i r n o u
    B i r n o uCorrect answer
    Legend
    November 8, 2017

    well I can't reproduce your trouble... here is a video demonstrating the point

    11.08.2017-11.33.36

    designm19985728
    Participating Frequently
    November 8, 2017

    that helped thanks

    I copied what you had written. I had a space and too many speech marks.

    I assume it is suppose to be - style="everything to do with style"

    what i was doing was - style="color:white" text-decoration: "none"

    B i r n o u
    Legend
    November 8, 2017

    yes every description must be include in between the double quote sign... et separated by a semicolon.

    an other approach will be to link a style sheet to your HTML document and then you'll have two way for creating the appropriate rule, at least the selector to it

    1 - if you don't have access to the core content of the DOM, and so to the HTML, the solution will be to play with tags selector... so that do mean that all the paragraph, inlcuded in within an anchor tag, will have the text decoration removed

    that give the following rule to add to your style sheet

    a p {

       text-decoration:none;

    }

    but that way all the paragraph include in an anchor (how deep it is) will be affected... to reduce it, you could precise, only the paragraph present in the first level of an anchor, that will add the > sign in between a and p

    a > p {

       text-decoration:none;

    }

    2 - if you have access to the DOM and can add class to each appropriate element... you could create a class and add it as attribute to the appropriate paragraph... the name of your class can be what ever you want, but it also can be in a BEM approach (see BEM infos - BEM — Block Element Modifier )

    <p class="article-linked">

    and the rule to add to the style sheet will be

    .article--linked {

       text-decoration:none;

    }

    Now from there, you can add all the needed description, color, margin, padding, font and so on... to each rule as you like