All of my links changed back to purple

1

I did
text-decoration: none;
color: white;
and it worked but today I added a new button and added a page link to the button and now all page links have purple colors and underlines! Help please!
EDIT: My background color also extends past the normal background, so you can scroll…
EDIT: https://codepen.io/MikahBerl/project/editor/DzwPOY

2

Post your code, we can’t help you otherwise. You can use Codepen or something like that.

3

My guess is that the links now have the :visited pseudoclass

4

Updated post with the link to the project on Codepen!

5

Your links are all blue for me. I do not see any CSS targeting the link elements.

Remember that if you visite a link (click it) it turns purple by default. You can change that using the :visited CSS pseudo-class @ArielLeslie linked to.

6

You have to target a tag and override default color.

a { color:white} /* Globally */

/* Each state */

a:visited { text-decoration: none; color:white; }
a:hover { text-decoration: none; color:blue; }
a:focus { text-decoration: none; color:yellow; }
a:hover, a:active { text-decoration: none; color:black }
7

Right, they are supposed to be white, they are not supposed to have any highlight or underline, it worked fine yesterday but today they are blue/purple

8

The only selector I see which can target a link is header .logo a but that is an incorrect selector so it isn’t targeting anything.

Also, it is pretty confusing that you have two stylesheets, a style element, and inline styles. How are you going to keep track of your styles like that?

9

The website is just a fun project I wanted to work on, the style.css is for particles.js and styles.css is mine, and the selectors were .rainbowbutton, a, .button, and in index.html
EDIT: .logo was a future implement, it was there but then I accidentally replaced my index.html

EDIT 2: all the different inline and whatnot is because I am trying to fix the colors, once I fix them I will do touchups

10

I fixed it! The issue was at somepoint (Probably like 1 AM when I was almost literally asleep) I deleted
a {
text-decoration: none;
color: white;
}

11

Although I fixed it, I did not fix my background color just being at the bottom, can anyone help with that?

12

Sorry I missed it. I’m not sure what you mean? Are you talking about the height of the page being taller then what you expect?

The height comes from the 100% height you have given the two headers (h1 and h4) and the bottom padding on the body and .rainbowbutton element.

13

Yes I am, do you know a way to fix it?

14

Remove the height 100% on the h1 and h4, then remove the bottom padding on .rainbowbutton.

To vertically center .rainbowbutton you can use position absolute and top 50% instead.

15

Thanks! it Worked! And now time to mess around with other pages :smiley:

16

Congrats on fixing this yourself. Reading the beginning, I thought there was a CSS issue.