Issue
This is my very first experience in web development and I need help with CSS. I used an unordered list for 2 links that forward users to the web courses. Also, I used links to let users open the other page on my website. Today I added some external CSS to it. I tried to make link buttons change their colors when users mouses over them. I've succeeded with styling links for courses but the style of the "page links" doesn't work the same. It seems to me that the "h3 CSS rule" (let's call it like that) doesn't let the "links CSS rule" apply to "Contact me" and "Main page". So, the links for courses change their colors but page links don't. How can I fix it? Thank you.
The whole HTML code (main page):
<head>
<meta charset="utf-8">
<title>Anton's Personal Site</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<table cellspacing="20">
<td><img src="Images/1.jpg" alt="Anton profile picture" style="width:200px;height:350px;"></td>
<td>
<h1>Anton Blahist</h1>
<p><em>Web Development <strong>Beginner</strong></em></p>
<p>23 years old, like computer games, creating music and writing songs</p>
</td>
</table>
<h3>Education</h3>
<ul>
<li><a href="some courses">some courses</a></li><br>
<li><a href="some courses">some courses</a></li>
</ul>
<h3>Hobbies</h3>
<ol>
<li>Computer gaming</li>
<li>Song writting</li>
<li>Music creating with FL Studio</li>
<li>Sports exercises</li>
</ol>
<h3>Skills</h3>
<table>
<tr>
<td>
<table>
<tr>
<td>English</td>
<td>🔹🔹🔹🔹</td>
</tr>
<tr>
<td>Sports</td>
<td>🔹🔹🔹🔹</td>
</tr>
<tr>
<td>Music</td>
<td>🔹🔹🔹</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Lyrics</td>
<td>🔹🔹🔹🔹</td>
</tr>
<tr>
<td>HTML</td>
<td>🔹🔹</td>
</tr>
<tr>
<td>Gaming</td>
<td>🔹🔹🔹🔹🔹</td>
</tr>
</table>
</td>
</tr>
</table>
<hr>
<a href="contact_me.html">
<h3>Contact me</h3>
</a>
</body>
</html>
The whole HTML code (Contact page):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contact me</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h2>Contact me</h2>
<form action="mailto:myemail" method="post" enctype="text/plain">
<label>Your Name:</label>
<input type="text" name="" value="">
<br>
<label>Your Email:</label>
<input type="email" name="" value="">
<br>
<label>Your Message:</label>
<br>
<textarea name="name" rows="10" cols="30"></textarea>
<br>
<input type="submit" name="">
</form>
<hr>
<a href="index.html">
<h3>Main page</h3>
</a>
</body>
</html>
The whole CSS code (external):
body {
background-color: #E3FDFD;
color: black;
}
hr {
border-style: dotted none none;
border-color: #71C9CE;
border-width: 5px;
width: 3%;
}
h1 {
color: #2F8F9D;
}
h2 {
color: #2F8F9D;
}
h3 {
color: #2F8F9D;
}
a:link, a:visited {
background-color: #A6E3E9;
color: black;
border: 1px solid #2F8F9D;
padding: 5px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: #A6E3E9;
color: white;
}
label {
color: #2F8F9D;
}
Solution
Make this change in your code:
<h3>
<a href="index.html">Main Page</a>
</h3>
<a>
inside the <h3>
and not the other way around.
Answered By - Tonielton Mota
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.