Adding a class to CSS

HTML & CSS
#1

I want to add a class to this CSS and having trouble. Do I have too many redundancies by using “A”?

     <style>
         A:link { 
color : #1e5186; 
text-decoration : none; 
} 
A:visited { 
color : #1e5186; 
text-decoration : none; 
} 
A:hover { 
color : indianred; 
}
</style>

Thank you

#2

Well these are redundant because they apply the same styles, you could just say a:link, a:visited (or a:any-link, which combines :link and :visited).
I dont… know what you mean by “having trouble” though? What’s it doing that it shouldnt be, or not doing that it should be?

#3

This CSS works fine and I use it on many pages. On one particular page I want to use it but I also have another CSS with buttons that conflicts with this one. So I wanted to add a class to use for one hyperlink only.

#4

well if its a singular link, add an ID and define the css for that ID…

a#myid:link (or whatever)

#5

So I want this CSS:

     <style>
#top {
         A:link { 
color : #1e5186; 
text-decoration : none; 
} 
A:visited { 
color : #1e5186; 
text-decoration : none; 
} 
A:hover { 
color : indianred; 
}
</style>

Applied to this:

<p id="top">Hello</p>

So what I am doing wrong because it’s not working? Because I am not sure if I am applying the id correctly to the entire style.

#6

should be a comma. Brackets are for when you’re ready to define the styles to be applied.

#top,
A:link {

Will apply the styles in the {}'s to both #top and a:link.

#7

There you go, that works but I am still getting a conflict with this where the text is the color in the first CSS, not white.

<style media="screen">

.button1 {
    display:table-cell;
    border-radius: 7px;
    width: 20.38em;
    height: 2.00em;  
    padding: 0.33em;
    border: 0.16em solid #c4d7dd;
    vertical-align: middle;
    background-color: #c4d7dd;
    font-family: arial, helvetica, sans-serif;
    font-size: 1.1em;
    font-weight: 600;
    color: #000;
    text-decoration: none;
	cursor:pointer;
    text-align: center;
    transition: 0.35s ease-in-out;
 }

.button1:hover, 
.button1:active {
    border-color: #000;
    border: 0.36em solid #000;
    background-color: #c4d7dd;
    color: #000;
 }
</style>
#8

#000 is black, not white…white would be #FFF.

#9

Yep, my mistake and I knew that. I was messing around with colors to figure out what was going on. But I changed it back.

But I still have the problem. The color on the screen is same color as in the CSS with the ID. That’s the conflict as I originally mentioned. It should be white which is #FFF.

#10

im missing something. why would a style for a tags be applying to a p tag?

#11

It’s being applied to a href tag.

Summary: If I remove the first submitted CSS then the .button1 class works fine. If I keep the first CSS, the .button1 class color of text is the color:

#1e5186

So I want to stop the conflict and use ID on the ahref.

#12

I dont see how button1 is being applied to an element tuat isnt classed button1.

if its wrapped in an element classed that, then the style associated to the tag will override the style assigbed to the container; thats what css does.

#13

Thanks for the info

#14

That looks like the visited state of a link. Did you define a visited color for your button class. (Assuming it’s not a button but an anchor).

#15

Well, I sort of gave up on it and did something different because I couldn’t get any combination to work. Probably something simple but for me apparently not!!

The .button code has always worked:

<style media="screen">

.button {
    display:table-cell;
    border-radius: 7px;
    width: 7.58em;
    height: 1.60em;  
    padding: 0.23em;
    border: 0.16em solid #4c659b;
    vertical-align: middle;
    background-color: #4c659b;
    font-family: arial, helvetica, sans-serif;
    font-size: 0.9em;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    text-align: center;
    transition: 0.35s ease-in-out;
 }

.button:hover, 
.button:active {
    border-color: #000;
    border: 0.36em solid #000;
    background-color: #c4d7dd;
    color: #000;
 }
</style>

When I add this next CSS for other links on the page, I no longer get white as my color, I get:

#1e5186
<style>
         A:link { 
color : #1e5186; 
text-decoration : none; 
}
A:visited { 
color : #1e5186; 
text-decoration : none; 
} 
A:hover { 
color : indianred; 
}
</style>

I am using just a simple a href like this:

aasdfasdasdf.com

I tried using another class and id to put in this a href and adding that to the CSS, but obviously missing something key to doing it correct!

#16

I believe I gave you the answer but perhaps I wasn’t clear enough :slight_smile:

You didn’t style a visited state for the button class so it will take on the color from a:visited.

e.g. You have this:

.button:hover,
.button:active {
  border-color: #000;
  border: 0.36em solid #000;
  background-color: #c4d7dd;
  color: #000;
}

You have not styled the visited state so it will grab the color from here instead.

A:visited {
  color:yellow;
  text-decoration: none;
}

If you want the button not to receive that visited color then add it to your button rule. (The visited color is applied when the browser has seen the link destination before.)

.button:hover,
.button:active,
.button:visited{
  border-color: #000;
  border: 0.36em solid #000;
  background-color: #c4d7dd;
  color: #000;
}

Assuming that is the issue you are addressing :slight_smile:

1 Like
#17

Thank you Paul. All of that going back and forth and yes, you addressed it and it was a simple fix. Good explanation!

I do understand the visited rule and now see that I missed it. This was the first time I had other styles on the same page so it never occurred to me.

Appreciate your observant of this fix.

Thanks!

1 Like