Why is bad and easy intro for Cascading Style Sheets

I embarrassed to admit I hadn't used CSS before. I googled it, this tutorial came up, I found it quick and helpful, so I wanted to pass it along. It's a great, concise, easy-to-follow, tutorial about why the <font> tag in HTML is bad and how to use Cascading Style Sheets (CSS) instead: https://www.htmlcodetutorial.com/character_famsupp_92.html. If you want a basic understanding of CSS in 30 minutes, check it out.
If you ever work with raw HTML but don't know what a Cascading Style Sheet is, you should read a tutorial like this on.  On the other hand, if you're an HTML / CSS super guru, the rest of this post is going to bore you.

Super fast summary:
My super quick takeaway is that <font> is bad because it forces you to incorporate specific styles directly into the HTML. CSS lets you create "styles", and then the HTML only refers to the style and you can have a separate "style-sheet" to describe what the style actually is. CSS also lets you override the styles of existing tags so you can describe exactly what font,color,size,etc the <h1> tag should become. It's like abstracting implementation from the interface ... but for HTML instead of real code.

Simple example:
Here's a simple example to demo my new found understanding of CSS. The CSS specific portions of HTML are in red.

File: x.html:

<html>
<head>
<link rel="stylesheet" href="x.css" type="text/css" media="screen" />
</head><body>
This is true: <span class='pass'>1+2=3</span><br>
This is false: <span class='fail'>4+5=1 million</span><br>
This is <em>emphasis in blue</em>!
</body></html>

File:x.css:

/* define 'pass' and 'fail' styles */
.pass { color: green;}
.fail { font-weight: bold; color: red; }

/* Redine what the <em> tag should look like */
em { color: blue }

And here's what it looks like:

This is true: 1+2=3
This is false: 4+5=1 million
This is emphasis in blue!

An FYI: Blogs.msdn.com uses CSS to customize the looks:
The webpages for the different blogs on https://blogs.msdn.com  are customized by having different CSS files.
For example, my blog uses this CSS: https://blogs.msdn.com/Themes/Blogs/marvin3/style/style.csshttps://blogs.msdn.com/Themes/Blogs/marvin3/style/green.css
Chris Brumme's blog is current the default, which is using this CSS: https://blogs.msdn.com/Themes/Blogs/default/style/style.css
If you're bored, you can compare the appearance of the two blogs, and try to map those differences back to the differences in the style sheets.