CODEWITHSUNDEEP
htmlcss
user2163686
user2163686

Reputation:

Css link messing up

I'm just starting out in CSS and am have some trouble with adding colour to links. When I add the link colour it doesn't work, so I tried to fix it myself but only messed up my website more. This is my code.

<html>
    <head>
    <title> website </title>
    </head>
    <style type="text/css">
body 
    {
      background-color:#474747;
      color:#e1e1e1;
      font-family:"Courier New";
      text-align:center;
    {
      a:link
    {
      color:#00FFFF;}    /* unvisited link */
      a:visited
    {
      color:#4DFF4D;} /* visited link */
      a:hover
    {
      color:#00FFFF;}   /* mouse over link */
      a:active
    {
      color:#00FFFF;}  /* selected link */
    }
h1
    {
      font-size:40;
    }
h3
    {
      font-size:20;
      text-decoration:underline;
    }
p
    {
      font-size:12;
    }
    </style>
    <body>
    <h1> heading </h1>
    <hr size="3" color="red" />
    <h3>Welcome!!!</h3>
    <p>Welcome to my website!</p>
    <h3>Links</h3>
    <p><a href="http://www.youtube">Youtube</a></p>
    </body>
</html>

Is it something in the Html code or in the Css coding?Please help.

Upvotes: 0

Views: 232

Answers (2)

Milche Patern
Milche Patern

Reputation: 20492

There is an order to stylize anchors pseudo states.

a, a:link, a:visited {
    /* any links, unvisited links, visited links*/
}
a:hover, a:visited:hover, a:active, a:focus {
    /* any links hovered, any links already visited hovered, any links with active state (mouseDown or actual page), any links that has browser focus */
}
a:focus {
    /* maybe you want to remove outline for this one */
}

Try this out , of course, after cleaning up your messy .css

Upvotes: 0

Mike C.
Mike C.

Reputation: 3114

Start by properly closing your braces and let us know how that goes

body 
{
    background-color:#474747;
    color:#e1e1e1;
    font-family:"Courier New";
    text-align:center;
{

should be

body 
{
  background-color:#474747;
  color:#e1e1e1;
  font-family:"Courier New";
  text-align:center;
}

Upvotes: 1

Related Questions