Turbo123 Turbo123 - 5 months ago 7
CSS Question

CSS Styling for anchor tag is not working

I have placed some links on a page added a css file to the html one, but the styling is not showing up.

HTML:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="formatter.css">
</head>
<body>
<h1>Welcome</h1>
<hr/>
<div class="anch" style="text-align: center">
<a href="admin_login.jsp" style="" >Admin</a>
<a href="user_login.jsp">User</a>
</div>
</body>
</html>


formatter.css:

body{
font-family: Verdana, Arial, sans-serif;
color: #555;
background-color: silver;
}
h1{
text-align: center;
}
.anch a:link, a:visited{
text-decoration: none;
display: inline-block;
color: black;
background-color: white;
}
.anch a:hover, a:focus, a:active{
text-decoration: none;
display: inline-block;
color: white;
background-color: black;
}


When the above file is run, the body and h1 styles are visible but the anchor styles are not showing up. They appear in their default form (blue and underlined).
Here is an image of what shows up:

enter image description here

Answer

give style for a. then use colon for hover,active and others .

.anch a{

    text-decoration: none;
    display: inline-block;
    color: black;
    background-color: white;

}
.anch a:link, a:visited{
    text-decoration: none;
    display: inline-block;
    color: black;
    background-color: white;
}
.anch a:hover, a:focus, a:active{
    text-decoration: none;
    display: inline-block;
    color: white;
    background-color: black;
}
Comments