Highlighted

No underline on link

Community Beginner ,
Nov 08, 2017

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by B i r n o u | Adobe Community Professional

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

11.08.2017-11.33.36

Views

1.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

No underline on link

Community Beginner ,
Nov 08, 2017

Copy link to clipboard

Copied

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?

Adobe Community Professional
Correct answer by B i r n o u | Adobe Community Professional

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

11.08.2017-11.33.36

Views

1.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 08, 2017 0
Adobe Community Professional ,
Nov 08, 2017

Copy link to clipboard

Copied

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

11.08.2017-11.33.36

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2017 1
Community Beginner ,
Nov 08, 2017

Copy link to clipboard

Copied

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"

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2017 0
Adobe Community Professional ,
Nov 08, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2017 0
Adobe Community Professional ,
Nov 08, 2017

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2017 0
Adobe Community Professional ,
Nov 08, 2017

Copy link to clipboard

Copied

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 ?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2017 0
Adobe Community Professional ,
Nov 08, 2017

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2017 0
Adobe Community Professional ,
Nov 08, 2017

Copy link to clipboard

Copied

what do you mean by pseudo class ???

anyway, the author asked to target all the text of the article and not just sporadic links inside it... that why I've answered that way in my first message

but I feel like beeing transparent on it arf arf...

breathing some cool air is often a need when spending too much time in front of a screen ... arf arf

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2017 0
Adobe Community Professional ,
Nov 08, 2017

Copy link to clipboard

Copied

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

what do you mean by pseudo class ???

Any selector preceded by a colon : is a pseudo-class.

Meet the Pseudo Class Selectors | CSS-Tricks

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

anyway, the author asked to target all the text of the article and not just sporadic links inside it...

I see.  Well, that's not the meaning I got from it.

OP said:  This [article] text needs to be a link but not blue like the background.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2017 0
Adobe Community Professional ,
Nov 08, 2017

Copy link to clipboard

Copied

thanks for the link to pseudo class...

the point is that my question was about what do you mean by pseudo class, the question was about the text decoration... once applied on the main element, the new declaration will also affect the different states of this element... so my question ?

Concerning the interpretation of the question, your English is far better than mine. I thought I understood that the link should affect the whole paragraph. Hence my link proposal wrapping the paragraph

but it seems that you have not seen my answer

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 08, 2017 0