Apply hyperlink underline style to body only

Question

I was trying to apply the following anchor text underline style to my website but it is getting applied to the header and footer links too.

a {
   text-decoration: none;
   border-bottom: #EA215A 0.125em solid;
}

How do I apply this style to body links only?

Answer 1

There is no single code that works in all websites. It depends on the HTML code - can you share it?

Assuming HTML5, use article selector

The article text is likely in a <article> tag if the website uses HTML5.

If that is the case you should be able to use:

article a {
  text-decoration: none; border-bottom: #EA215A 0.125em solid;
}

Sometimes people put <header> and/or <footer> tags within the <article> tag so the above won't work.

If the HTML output is done well the article probably has sections. So replacing the selector above with article section a might give you better results in case header and footer are output within the article.

Without HTML5

You don't have to blindly guess what selector the article content has. Right click the article text and select inspect element or similar (likely at the bottom of the context menu).

You can probably build a selector by looking at the tags, which selector will work for article content.

Development tools

Get familiar with the development functionality of your browser in that case.

You will have to make sure this works for all types of pages the site has.
It seems you don't know the HTML too well... time to get familiar with it.

Answer 2

Should be enough with

body a { 
 text-decoration: none; 
 border-bottom: #EA215A 0.125em solid;
}

Answer 3

To apply to body only you should use css selectors, you can use element tags, classes or ids to specify where exactly you should apply styles.

Take a look at this page for more info on css selectors :

1. https://www.w3schools.com/cssref/css_selectors.asp
2. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors