Div styles

[lav0017]

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>

```

as i added my tag, the div styles stopped working on the link.
why ? like color,text decoration.
https://www.codecademy.com/courses/web-beginner-en-WF0CF/0/3?curriculum_id=50579fb998b470000202dc8b

<do not remove the three backticks above>

[funct1on]

Please paste in your code and the error you have.

[lav0017]

 <a href="https://www.facebook.com/?stype=lo&jlou=AffujpNo60dHU9ORR3CljghC4paf__O_3UYs7ssW2di7o187APiq8svilx_nX8wa71h8svKTk8t-8z6sJ0hkYzH0KYG6hg90rfwZcKLUHfov6Q&smuh=36325&lh=Ac86k7m0jYVajtJ4">Sign Up</a>

css:

div {
    background-color:#29b03f;
    height:40px;
    width:160px;
    margin:auto;
    text-align:center;
    font-size:30px;
    color:#ffffff;
    border-radius:20px;
}

[stetim94]

Can you post your full html and css code? Use markup:

How do I format code in my posts?

To format code so it’s visible, either wrap it in single backticks for a small amount of code, or triple backticks on an otherwise blank line before and after for a large amount of code.

We need your full code to understand the problem

[lav0017]

i don’t have that code now.
but i have a similar problem with the same topic.

`

Tips on getting things done

Google!

Codecademy

` css a:link { text-decoration:none; color:#008b45; font-size:30px; font-family:sans-serif; } a:hover { color:#00ff00; } a:visited { color:#ee9a00; font-size:20px; } why is it, that, the link is changing size and colour only when i change it in "a:link".. i have visited them all now..but i am unable to change the size and font family if i apply it to "a:visited"or a:hover".

[stetim94]

the changes of visited and hover work fine? If you want hover to work on visited, you should hover after visited:

a:visited {
    color:#ee9a00;
    font-size:20px;
}
a:hover {
    color:#00ff00;
}

all the property’s you add in a:visited work fine?

[lav0017]

the thing is… if i apply font-family and font-size to “a:link” it works fine with all 3.
but if i apply it to “a:visited” and delete it from “a:link”,then, everything goes back to its default size and font.

[stetim94]

then you haven’t visited the links? can you upload screenshots or something of one with a:link and one without?

[lav0017]

you see, now in this picture, first 2 links are visited ones and the last one is not. But the font-size working on all 3 of them is the one set to the unvisited links. and the one set for visited links is not working on the first 2(which are visited ones)
Hope i made my point clear.

[datfatcat]

Most browsers set limitations to a:visited for security reasons. And font-size is one of those limitations. You can’t change the font-size for visited links.

Source

---

As for hover, add in a line-height style that is equal to your desired font-size for hover. In your case, add line-height: 40px; before your font-size. This ensures that you will give room to the increased size of your hovered text. ALSO, move a:hover after the other selectors to get its full effects (more so the colour override)!
You can remove/change the value of the font-size in your a:link selector to make it not equal to the one in a:hover to see this effect better.

a:hover {
    color: #00FF00;
    line-height: 40px;
    font-size: 40px;
}

---

Optional: You can make your links line up as lists if you put display: block; under your a:link selector

[lav0017]

isn’t it already in “list” form ?

[datfatcat]

List as in
Like
This.

Without those points. It’s simply an aesthetic choice.