Hyperlinks, CSS & possible CSS-Pseudo classes?

HTML & CSS
1

Greetings and thank you in advance for any help.

I have text in an email that I want to keep the same color as it is now but make it a hyperlink to a website. I did some research and found a thing called CSS Pseudo Classes. It’s generic, of course, but since I’m teaching myself and I have something very particular I’m having issues. Well, “Issues” seem to be my middle name lately with teaching myself email development. Anywho, this is the code via w3schools.com:

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

Now my CSS code starts like this: (I used a template thinking it would be easier to teach myself, but I get into specifics of design and shoot, the template doesn’t seem so easy now)

<style type="text/css">
body {
	margin: 0;
}

After several defined styles, such as:

body, table, td, p, a, li, blockquote {......
table {.....
.footer {...

I get to the end of the defined styles with this:

a:visited {
	color: #565555;
}
a:hover {
	color: #F78413;
}
a:active {
	color: #F78413;
}
a:link {
	color: #565555;
}

Now, I’m ok, with this. BUT, at the very top of the email, I have a table. And within that table are 2 rows of text. One is a title (name of the conference), and the second line below it are the dates of the conference. The table background color is purple, and both lines of text are white. I would like to have the reader be able to click on the title and it goes to the website where the information about the conference is at. I want the title (in white), to stay white whether it’s “visited”, “hover”, or “active.” So, that’s what I’m looking for and whether that code goes at the very end of the CSS styles, right after the current hyperlink styles, or does it need to be placed somewhere else? It’s like I need alternate code or style to apply to just certain places. I’m having that same issue with email address text within the footer of the email.

Apologies if this entirely too long but I wanted to give as much as information as possible. Thanks all.

-Lisa

2

Hi @crucialvisuals. Welcome to the forums.

[off-topic]
When you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.

I have done it for you this time.
[/off-topic]

1 Like
3

In order for the colours t work satisfactorily it is essential they are declared in the correct order.

Please read the following short post and apply the necessary edit to your script.

1 Like
4

I’m so sorry about that. That was my first post. And thank you very much for formatting the code.

Sincerely,
Lisa

5

Thank you John. I think I understand what you’re saying. I read the short post. My CSS styles for hyperlinks are working good overall. But I need a specific style for 2 hyperlinks, both text based. One would lead the reader to a website and one is an email address, so it would lead to the readers default email provider. The one that is leading to a website, I want all styles that usually refer to a hyperlink (L,V,H,A) to stay in white. I want the same thing for the email link as far as the LVHA, but for the color to stay a particular purple. This is what I’m trying to achieve. Is what I’m trying to achieve called CSS-Pseudo classes? Maybe I’m using the wrong term. :slight_smile:

6

I think you are using the wrong term. If I understand you correctly, you just need to give the anchors you want styled differently a class and apply the appropriate styles to that class.

1 Like
7

I could very well be using the wrong term. I’m teaching myself. I know what I want, design wise, but it’s the coding I’m trudging through. But I really want to learn email development. I’m a graphic designer by degree, but I always stayed on the print side. So I’m having quite a time finding employment. I thought I would try email development because that interested me initially when I thought of the digital side of graphic design. So I’m almost finished, I think, with this email I’ve helped to code. It’s a template so there was code there already. I’ve just taken some out and put some in different places.

Anyway, if I could learn how to code what I’m trying to achieve and where to put that particular code within my html document, that would be awesome! And when you say “anchors” does that refer to the particular text I want to hyperlink and keep the same color throughout the LVHA cycle?

P.S. Thank you so much for any and all help.

8

Sorry, anchor is the a tag. So you would code it something like

<a href="whatever" class="weblink">link to website</a>

using whatever you like in place of weblink and defining whatever colours you want to your new class.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.