HTML & CSS Trouble modifying an id for an image in a div element

[coding_fromzero]

Hello everybody 😊

I'm super green when it comes to coding. I've only been working on it for around 3 weeks. I'm working through freeCodeCamp and I am doing one of the assignments where I have to add the id "img-div" to a div element, but when I try to modify it in CSS through VS Code, I get an error message on the CSS side saying "Do not use empty rulesets". I have made other ids in this code and everything works fine, but with this div that contains an image, it's not working at all.

I've had to resort to using div to modify anything related to the image. What's wrong? Please help.

Thank you!

-Brandi

 

[coding_fromzero]

EDIT: Oops, I think I needed to put my code through here:

[CODE lang="html" title="HTML"]<div id="img-div">
<img src="snoopy.png" alt="Side profile of a sweet animated beagle">
</div>[/CODE]

[CODE lang="css" title="CSS"]#img-div {

}[/CODE]

Sorry for the original clunky message above. But curious if the images are helpful or not? Thanks.

 

[BGB]

Move your style.css link inside head tag and move your h1,h2 and div tag inside body tag. Just read a few pages from here HTML Tutorial. It will help you to start.

 

[coding_fromzero]

Thank you! I did what you suggested. But I still have the same error code for this specific id. Don't know what it is specifically about it.

Move your style.css link inside head tag and move your h1,h2 and div tag inside body tag. Just read a few pages from here HTML Tutorial. It will help you to start

 

[BGB]

Paste the full html and css code here.

 

[coding_fromzero]

Paste the full html and css code here.

[CODE lang="html" title="HTML"]<!DOCTYPE html>

<html>
<head id="main">
<title>Snoopy Tribute Page</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>


<body>
<h1 id="title">SNOOPY</h1>
<h2 id="subtitle">not your average beagle</h2>
<div id="img-div">
<img src="snoopy.png" alt="Side profile of a sweet animated beagle" id="image">
</div>


</body>

</html>[/CODE]

[CODE lang="css" title="CSS"]#title {
font-family: 'Patrick Hand', cursive;
color:#FF0000;
text-align: center;
}
#subtitle {
font-family: Dosis, sans-serif;
color: #ffc300;
text-align: center;
}
#img-div {

}
[/CODE]

 

[CarlEOgden]

Does this help any?

Codepen Example

Also, you can play around in Codepen and learn HTML/CSS/JS

Cheers
Carl.

 

[coding_fromzero]

Does this help any?

Codepen Example

Also, you can play around in Codepen and learn HTML/CSS/JS

Cheers
Carl.

Thanks Carl, I ended up finding a solution!