The most basic website requires only one file - an HTML file. That file would contain the text shown on that page and all the text would be styled using HTML code. For examle - to set the font, the font size, the color - this would be done within that HTML file.

Websites these days are much more than simple HTML websites, and the first step is to take that styling code and put it into a seperate file. This is called a style sheet, and is a css file.

One example of a CSS file from Joomla would be the template.css file in the default Protostar template.

Why is CSS Good?

Using a CSS file reduces the code in the HTML file. There's a benefit for you because you don't have to write the color, size, font syle and a lot more for every page. You only have to do it once, in the CSS file.

For your readers, using CSS makes your website load faster. The first time someone looks at your website, they download the smaller HTML file and the CSS file. The next page they visit, they will only be downloading the HTML file. The CSS will be stored in their browser, saving downloading time. If your styling code was written on every page, they would have to download larger HTML files for every page they view on your website.

There's another benefit in that the page isn't cluttered with styling code. Your readers may not see it but google does and they prefer cleaner web pages that use CSS.

CSS the right way to do it (which is why google likes it). Some of the code used in HTML is the old way of doing it, and as browsers advance and start ignoring older coding, your page will not look the way you want.

Examples of CSS on this Site

This site is using the Protostar template that comes default in Joomla since version 3.0, and you can probably see some similarities. However I have changed some things using CSS to personalise the site.

One example is the links. When you put your mouse curser over a link, you will see it turns a bright green colour. To do this, I accessed the template.css file and changed the color of the hover effect on links.

Where it originally said

a:hover,
a:active,
a:focus
{
background:#095197;
color:#FFF;
}

I removed the instructions to make the link text background change color when your mouse hovers over it by deleting background:#095197; then instead of having the text turn white (#FFF) on hover color, I changed it to 

a:hover,
a:active,
a:focus
{
color: #11dd22;
}

This changes all links throughout the site to change to green when you hover over them with your mouse curser.

Another example is on the Free Resources page, I have set the properties for the images in CSS rather than in HTML.

In the CSS file (template.css), I have written

.resourceimg {
width: 125px;
height: 125px;
margin: 0 5px 20px 0;
border: 0;
float: left;
}

This just sets the width, height, margin, border and position of the image. I could write all this in the HTML when I put the image in by including it inside the image tag, but I would have to write it for every image.

By using CSS, the only thing I have to do is, in the text editor, toggle the editor to source code mode and in the HTML <img> tag, write

class="resourceimg"

This makes the browser apply the rules of class "resourceimg" to that image.