Inspiring

Répondu

How to incorporate link CSS with an ID CSS?

Forum|Forum|8 years ago
January 25, 2018
1 commentaire
435 vue

I have a table set up and have the BG color and so forth ready but cannot figure out how to make a text link inside of the table have stylized link effects in it. Here is what I have. I thought that because I included the link styling in the #mm part it would work. Any help is appreciated thank you.

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

<style>

#mm {

color: #ffffff;

background-color: #1f4d81;

a:link {

color: #ffffff;

text-decoration: none;

}

a:visited {

color: #ffffff;

text-decoration: none;

}

a:hover {

color: #ffffff;

text-decoration: underline;

}

a:active {

color: #ffffff;

text-decoration: underline;

}

</style>

</head>

<body>

<br/>

<tbody>

<tr>

</td>

<td width="96%" align="left" valign="middle">Some white text here

<a href="page.html" target="_blank" style="text-decoration: underline;">Click here to join the conversation</a></td>

</tr>

</tbody>

</table>

</body>

</html>

Ce sujet a été fermé aux réponses.

Meilleure réponse par Jon Fritz

You're missing an ending } for your #mm id.

#mm is the <div>

a:whatever is written after (overwrites) and specifically targets the links.

"#mm a:whatever" as a selector will probably get you where you want to be. (affecting only the links inside the <div id="mm">)

Remove the inline css from the link, inline will (almost) always overwrite the external sheet or <head> css.

If you want all the text to be white, and have an underline show up on :hover or while being clicked with :active (I think what you're going for?), this is how I would change your code...

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

<style>

#mm {

color: #ffffff;

background-color: #1f4d81;

}

#mm a {

color: #ffffff;

text-decoration: none;

}

#mm a:visited {

text-decoration: none;

}

#mm a:hover {

text-decoration: underline;

}

#mm a:active {

text-decoration: underline;

}

</style>

</head>

<body>

<br/>

<tbody>

<tr>

<td width="96%" align="left" valign="middle">Some white text here <a href="page.html">Click here to join the conversation</a></td>

</tr>

</tbody>

</table>

</body>

</html>

Jon Fritz

Réponse

Community Expert

You're missing an ending } for your #mm id.

#mm is the <div>

a:whatever is written after (overwrites) and specifically targets the links.

"#mm a:whatever" as a selector will probably get you where you want to be. (affecting only the links inside the <div id="mm">)

Remove the inline css from the link, inline will (almost) always overwrite the external sheet or <head> css.

If you want all the text to be white, and have an underline show up on :hover or while being clicked with :active (I think what you're going for?), this is how I would change your code...

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

<style>

#mm {

color: #ffffff;

background-color: #1f4d81;

}

#mm a {

color: #ffffff;

text-decoration: none;

}

#mm a:visited {

text-decoration: none;

}

#mm a:hover {

text-decoration: underline;

}

#mm a:active {

text-decoration: underline;

}

</style>

</head>

<body>

<br/>

<tbody>

<tr>

<td width="96%" align="left" valign="middle">Some white text here <a href="page.html">Click here to join the conversation</a></td>

</tr>

</tbody>

</table>

</body>

</html>

Deaf_GuyAuteur

Inspiring

Really appreciate it thanks so much!

Inscrivez-vous

Login social

Bienvenue

Login social

Analyse virus du fichier

Ce fichier ne peut pas être téléchargé