First off “CSS” stands for “Cascading Style Sheets.” The main idea is you can write “sheets” of code just for styling that’s separate from the HTML content. Imagine you have a bunch of content on a page. You have a <div> tag that groups a block of content like this:

<div>
   <h1>Title</h1>
   <h2>Sub Heading</h2>
   <p>Paragraph in an article for example...</p>
</div>

To stylize this, you can specify neatly in code elsewhere the following:

div  {border-style: dotted;}
div p {color: blue;}
h1 {font-size: 18px;}

The beauty of CSS are these “selectors.” The selectors are the parts before the opening curly brace. They let you select the content on the page and refer to it in order to apply styles to them. This is a great thing because it separates styling code from content code, and the result is 2 places where 2 different types of code is and they are therefore more concise and easier to read. The messier way to code this with HTML and CSS styling code combined is:

<div style="border-style: dotted;">
   <h1 style="font-size: 18px;">Title</h1>
   <h2>Sub Heading</h2>
   <p style="color: blue;">Paragraph in an article for example...</p>
</div>

See how the content-centric HTML code is now busier. It makes it harder to read the CSS styling code and the HTML content code. With the code in 2 places as in the previous example it’s easier to read each set of code. The benefit is also that you can write CSS that will affect more than just one block of code. All <div> elements and all <p> elements within <div> elements and all <h1> elements on the page will have the same CSS styles applied to it, and yet you only had to write that CSS once! So that means even less code. If you did it the “inline” way above, you would have to re-write the same CSS rules (more technically called “properties” and “values” in multiple places. Note: something like “border-style” is called a “property” and “dotted” is that property’s “value.”