As a beginner, I am facing an issue with my CSS. When I directly insert the CSS into the head of my .html file, everything looks perfect. However, when I link my .css file into the head, the very first word ("Holy") does not display properly. I have double-checked the CSS to ensure it is the same whether pasted or linked, but I'm still unable to find a solution. Any help would be greatly appreciated. Thank you in advance.
This is the CSS code:
<span class="holy"></span>
<span class="waiving"></span>
<span class="american"></span>
<span class="flag"></span>
<span class="batman"></span>
<style>
.holy {
background-color: red;
color: white;
}
.waiving {
background-color: white;
color: blue;
}
.american {
background-color: blue;
color: white;
}
.flag {
background-color: white;
color: red;
}
.batman {
background-color: black;
color: yellow;
}
</style>
And this how I've linked it where only the First "Holy" doesn't work:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="batman_with_css.css">
</head>
<body>
<span class="holy">Holy</span>
<span class="waiving">Waiving</span>
<span class="american">American</span>
<span class="flag">Flag</span>
<span class="batman">Batman!!!</span>
<br>
<img src="https://i.pinimg.com/736x/af/7b/d3/af7bd3df85c1397456084b29e3729269--keaton-batman-batman-car.jpg">
</body>
<html>
Finally, here is the HTML file with the CSS code within the head where everything works correctly:
<!DOCTYPE html>
<html>
<head>
<span class="holy"></span>
<span class="waiving"></span>
<span class="american"></span>
<span class="flag"></span>
<span class="batman"></span>
<style>
.holy {
background-color: red;
color: white;
}
.waiving {
background-color: white;
color: blue;
}
.american {
background-color: blue;
color: white;
}
.flag {
background-color: white;
color: red;
}
.batman {
background-color: black;
color: yellow;
}
</style>
</head>
<body>
<span class="holy">Holy</span>
<span class="waiving">Waiving</span>
<span class="american">American</span>
<span class="Flag">Flag</span>
<span class="batman">Batman!!!</span>
<br>
<img src="https://i.pinimg.com/736x/af/7b/d3/af7bd3df85c1397456084b29e3729269--keaton-batman-batman-car.jpg">
</body>
</html>