Basics of CSS Cascading Style Sheets

A CSS page is an additional page in any web site which contains a lot of the code controlling how the other pages actually look. It may seem like additional work but once you get the hang of it then it can make life a lot easier and will cut down on the code and loading time of the proper web pages.

Basic CSS

Let's look at the CSS page to the left which we will save as fishstyle.css
The first line is just a basic name for the page for your own use.
The rest contains code which will control how your actual web page will look.
The first bit of code is the BODY which refers to a general overall control of everything on the page. In this example we are just controlling the text colour which is #000033 or dark blue.
The next bit, the H1, is used as the opening heading of a page and can be various sizes - smaller ones are H2, H3 etc. We've instructed that it should be in an Arial font and should be in a slightly darker blue than the normal blue text (#00066).
The SPAN part refers to standard text within the page.
The next line is a bit of code if we ever need to align text in a central position.
The IMG border is set to 0 so that no border will appear around any pictures we use.
The next bit we've named roundedtable is surrounded by curly brackets because it needs all of the code to create a table around our text which will have rounded corners.

Save the page as fishstyle.css in your FishBasket folder.

NOTE: there's obviously a ton of other stuff you can do with CSS so do some research if you require any other features.

So let's now put it into action in our basic page we made at Basic.html

Basic web page

HTML 5 requires that we seperate a page into different parts and in future this may ultimately be useful to search engines, so it's worth doing.

As previously stated the actual visible part of the page goes in between the BODY tags and you can see the first part is called the HEADER. This should contain the most important headline to your page. We've inserted our product using the H1 tags so that it is big and bold. The DIV class is added so that we can align the text to the center.

Next comes the main text on the page and HTML 5 wants you to call this the SECTION. You can actually have different SECTIONS within a page and can identify them by giving them a name such as 'id=maintext' etc.

We want to have our text contained within a 'table' border, so that's the code you can see and we want it to be a rounded corner table so have given it a class to tell the browser to create it using our CSS roundedtable instructions.

Next we want to insert our text. Ordinary text is generally identified with the SPAN instructions and here we want it to be SPAN class=c1 which our CSS page instructs will be arial font at 80% normal size. Note that you can also specify a fixed pixel size but to make your site as disabled friendly as possible you should always use percentages so that the person looking at your site can then instruct their browser to increase the font size easily if they have difficulty reading the text.
The BR signifies a line break and unlike other code doesn't require a closing one with forward slash. The pound sign is produced using a code which will display the pound sign in most browsers.

That's it. You can now save this page again as 'index.html' and combined with our 'fishstyle.css' page we now have enough of a valid HTML5 site to put on the web.

But let's first add a picture to the page. Click on IMAGES now >>