CSS

What is CSS?

CSS (Cascading StyleSheets) makes web pages look nice - the fonts, the colours the way the page is laid out (e.g. a nav bar or side menu).

It didn't exist on the early web, and HTML still has a bunch of tags like <font> for controlling look and feel, but these are frowned upon by the developer community.

Make your index page look nicer

Add a <style> tag to the head section of your page:

index.html

First, change the font for everything inside the body tag:

Now change the background colour of just your p tags:

Note: the American spelling of "color"

Note: CSS colours are usually in HEX format e.g. color: #ff0000; for red

Classes

Sometimes you want to target specific items... for example if you want some paragraphs to be red - but not all of them.

A class in CSS is simply a variable name you choose yourself and slap on an HTML tag (pretty much any HTML tag) with a class='blah' e.g.:

You then refer to that class in your CSS using a full stop "." (which btw is a TERRIBLE design choice by the CSS team as "." was already being used to mean a crap-ton of other stuff in comp sci (like for decimals - heard of them guys??))

ids

If you have one tag you want to target (and the only one on a page) you can use an id.

These use id='blah' in the code, and #blah in the CSS e.g.

Using a shared CSS file

Now, instead of having a <style> tag in the head of your page, save your CSS to it's own .css file:

styles.css

... and pick that up in the head section of ALL of the pages on your website, so they all look the same:

index.html, squirrels.html, blah.html, ...

More learning