Early attempts to add styling to HTML pages were pretty labour-intensive.
Back in the '90s, if you wanted all of your headings to be Comic Sans in a vibrant Chartreuse green, (and let's face it, who wouldn't?) you would have to add
<font face="Comic Sans" color="chartreuse"> to every single heading, on every page of your website, like this:
<h1><font face="Comic Sans" color="chartreuse">My Kool Website</font></h1>
<h2><font face="Comic Sans" color="chartreuse">Welcome to Horatio's homepage!</font></h2>
This was A LOT of repetitive work, it was difficult to make changes across whole websites, and it made the HTML code really messy and hard to read.
CSS (Cascading Style Sheets) was developed to keep style information separate from content, meaning the HTML code was easier to read and understand:
<html>
<head>
<!-- all the style information is contained here-->
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- all the site content is contained here-->
<h1> My Kool Website </h1>
<h2> Welcome to Horatio's homepage! </h2>
<p> I'm really into pagers, rollerblading, and the TV show Full House.
What about you? </p>
</body>
</html>
You can see in the <head> of the HTML page, that there is a link to a document called styles.css. It contains the style properties for the <h1> and <h2> headings:
h1, h2 {
color: chartreuse;
font-family: "Comic Sans";
}
This approach meant that styles could be written just once in a CSS stylesheet, and then applied to multiple elements across multiple HTML pages. This made it much quicker and easier to make changes, try out different styles, and get everything looking just perfect.