The links on my page are not displaying the styling from the CSS file I added.
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;
}
After running the above files, the body and h1 styles show up correctly, but the anchor styles do not apply. They remain default (blue and underlined). View an image of the issue here: