How do I change link style in CSS? - html

Question

I know this sounds like an obvious question and answer, but I have spent a long time trying to figure this out, and for some reason, none of the answers are not working for me. Honestly, this is probably going to be a simple obvious answer I just can't catch. But here's the problem: I am making a website out of HTML5, CSS, and some PHP.
The issue is, that my links appear blue and purple with an underline. I know this is how they are supposed to look, but I have tried many different ways to re-style the links with text-decoration: none, and different colors and so on.
Here is my CSS and the HTML part with a link:
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
}
a {
text-decoration: none;
color: brown;
}
.sidebar {
width: 25%;
height: 100%;
float: left;
background-color: #BC986A;
overflow-y: scroll;
}
.side-option {
width: 100%;
height: 155px;
background-color: #BC986A;
}
.side-option:hover, .side-option:focus {
background-color: #DAAD86;
}
.side-name {
font-family: "Indie Flower", cursive;
font-size: 1.8em;
margin: 2px 2px 0px 7px;
padding: 5px 5px 0px 5px;
}
.side-image {
width: 150px;
height: 97px;
margin: 0px 0px 0px 15px;
border: 0.3em solid #FBEEC1;
}
.info {
background-color: #659DBD;
width: 75%;
height: 100%;
float: right;
}
#name {
font-family: "Gloria Hallelujah", cursive;
font-size: 50px;
text-align: center;
color: #FBEEC1;
}
#s-name {
font-family: "Gloria Hallelujah", cursive;
font-size: 20px;
text-align: center;
color: #FBEEC1;
}
#image {
display: block;
width: 384px;
height: 256px;
margin-left: auto;
margin-right: auto;
border: 0.5em solid #BC986A;
margin-top: 10px;
}
#desc {
font-family: "Rock Salt", cursive;
font-weight: bold;
font-size: 20px;
text-align: center;
color: #DAAD86;
}
<div class="sidebar">
<a href="index.php?page=0"><div class="side-option">
<h2 class="side-name">Brown Bear</h2>
<img src="http://maxpixel.freegreatpicture.com/static/photo/1x/Animal-Brown-Bear-Beast-Bear-Teddy-Bear-Mammal-422682.jpg" class="side-image" alt="Brown bear standing in tall plants.">
</div></a>
I'm not sure if you needed all that, but there it is anyway.

Answer 1

For hover color change you can use this css
.sidebar a:hover{color:red; }
For keep the color focus after click
.sidebar a:focus{color:blue; }

Answer 2

1) You need to change your code from </div></a> at the end to this: </div></a></div>
2)Links can be styled differently depending on what state they are in.:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
You can read more about this in: https://www.w3schools.com/css/css_link.asp
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
}
a, a:link, a:visited{
text-decoration: none;
color: brown;
}
a:hover, a:active{
color: green;
}
.sidebar {
width: 25%;
height: 100%;
float: left;
background-color: #BC986A;
overflow-y: scroll;
}
.side-option {
width: 100%;
height: 155px;
background-color: #BC986A;
}
.side-option:hover, .side-option:focus {
background-color: #DAAD86;
}
.side-name {
font-family: "Indie Flower", cursive;
font-size: 1.8em;
margin: 2px 2px 0px 7px;
padding: 5px 5px 0px 5px;
}
.side-image {
width: 150px;
height: 97px;
margin: 0px 0px 0px 15px;
border: 0.3em solid #FBEEC1;
}
.info {
background-color: #659DBD;
width: 75%;
height: 100%;
float: right;
}
#name {
font-family: "Gloria Hallelujah", cursive;
font-size: 50px;
text-align: center;
color: #FBEEC1;
}
#s-name {
font-family: "Gloria Hallelujah", cursive;
font-size: 20px;
text-align: center;
color: #FBEEC1;
}
#image {
display: block;
width: 384px;
height: 256px;
margin-left: auto;
margin-right: auto;
border: 0.5em solid #BC986A;
margin-top: 10px;
}
#desc {
font-family: "Rock Salt", cursive;
font-weight: bold;
font-size: 20px;
text-align: center;
color: #DAAD86;
}
<div class="sidebar">
<a href="index.php?page=0"><div class="side-option">
<h2 class="side-name">Brown Bear</h2>
<img src="http://maxpixel.freegreatpicture.com/static/photo/1x/Animal-Brown-Bear-Beast-Bear-Teddy-Bear-Mammal-422682.jpg" class="side-image" alt="Brown bear standing in tall plants."/>
</div>
</a>
</div>

Answer 3

a {
text-decoration: none;
color: brown;
}
is where you need to make changes to edit links
to change hover options:
a:hover {
style it here
}
and for already visited links on your site:
a:visited {
style it here
}

Answer 4

You asked how to style links.
a{
color: red;
cursor: wait;
font-size: 24px;
transition: color 0.3s, text-shadow 0.3s;
text-decoration: none;
}
a:hover{
color: green;
text-shadow: 1px 2px 3px #000;
text-decoration: overline;
}
a:active{
font-weight: 900;
}
Working link.