Just starting to learn HTML/CSS and working on a project. Struggling because my CSS styles aren't showing up in Chrome when I preview my work. Here's the code I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gritt-ify</title>
<link rel="stylesheet" type="text/css" href="./resources/css/stylesheet.css">
</head>
<body>
<!-- Banner section -->
<div class="banner">
<h1>Gritty's landing banner</h1>
<img id="grimage" src ="./resources/images/gritty img.jpg" alt="">
<p>Cause everything's better with Gritty's face on it</p>
<button> Subscribe to Gritty</button>
</div>
<!-- Gritter section-->
<div>
<span>Gritter</span>
<p>Social media dedicated to Gritty and only Gritty</p>
<form action="">
<input type="text"/>
<input type="submit" value="Submit"/>
</form>
</div>
<div>
<ul>
<li>
<div></div><span>Hey there, it's Gritty again.</span>
</li>
<li>
<div></div><span>Hey there, it's Gritty again.</span>
</li>
<li>
<div></div><span>Hey there, it's Gritty again.</span>
</li>
</ul>
</div>
</body>
</html>
Here's the minimal CSS I've added:
.banner {
background-color: #4D00FF;
color: white;
margin-top: 75px;
text-align: center;
}
#grimage {
height: 50px;
width: 50px;
}
If you see an obvious mistake, please let me know. Appreciate any help or suggestions. Thank you.
UPDATE: Issue has been fixed. Thanks to everyone for their input!