You don’t want any HTML to be inside of your <style>
tags. HTML is all the stuff in between angle brackets <p>Like this</p>
. Everything inside of the <style>
tags should just be CSS, which uses rules and curly braces kinda { like: this; }
<h1>This is HTML</h1>
/* This is CSS */
body {
background-color: black;
font-family: Monospace;
color: green;
}
The <style>
tags in HTML have a very special meaning. Everything in between <style>
and </style>
is CSS, but everything outside is HTML. Think of it like a fence that keeps your code from mixing.
<style>
// Only CSS goes in here.
body {
background-color: black;
font-family: Monospace;
color: green;
}
</style>
<h1>HTML goes outside!</h1>
You can add styles to specific HTML elements with style
. This is generally a bad idea, and you’ll learn why later, but for now just remember that you can only do it to HTML outside of the style fence.
<style>
// Only CSS goes in here.
body {
background-color: black;
font-family: Monospace;
color: green;
}
</style>
<h1 style="font-size: 1.3em;">Bad styling!</h1>