This is a fairly easy explanation of starting to use CSS as long as you are comfortable using and editing HTML files. If not then you might want to refer to my first post:
http://siobhanallen.blogspot.co.uk/2013/02/html.html - though there are a million pages that can start you off too.
I wrote this for a lad that I teach who is very bright (yes, you!) but doesn't like to read the explanations very much!
I got this info from
http://www.w3schools.com/css/css_howto.asp and this is a very good tutorial series
http://www.w3schools.com/css/Also, Codeacademy can't be beaten:
http://www.codecademy.com/tracks/htmlcssBut this will get you started:
QUICK INTRO TO CSS – READ THIS EVEN THOUGH YOU DON’T WANT TO!!!!
CSS is a fairly new way to pull out the ‘formatting’ for a web page and keep it separate from the ‘content’ of the web page. The other good thing about using CSS is that you explain the format once, and then you just refer to that each time you want a style, rather than writing it out in full each time. Look at a cheat sheet for examples of the sorts of things you can define
There are three ways to put in CSS:
1. Inline. This is no better than old fashioned HTML, you just write in the format for every part of the page as you need it. You have to repeat everything and it’s muddled. The only good thing is it’s more up-to-date instructions.
2. Internal style sheet. Here, you put the formatting instructions at the top of your HTML page (inside a <style> …. </style> instruction, and just refer up to it in the body section each time you need it.) These styles will only work in that html page.
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
3. External Style Sheet. This is the best, and once defined you can refer to it from all the HTML pages in a series. You have to make a separate file, and save it like an HTML file (save as type: all files, extension xxxx.css (rather than xxx.html)). There are no HTML tags in the .css file, just the definitions.
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
The formatting looks tricky, but it’s very regular – once you get it, it’s very standard. Just watch those colons and semi-colons – they matter a lot!
4. Then in the head section of the .html file, you tell it where to look for the styles (ie, the .css file)
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
MENU BUILDER – READ THIS TOO - IT EXPLAINS A LOT!
That’s the theory – you can get a really good example with this menu builder. Search for: html cssmenubuilder com
Choose the menu you want and work through the three options (select image, select colours, add links) until you get to export.
Here you get two choices: download or CSS/HTML on the page. If you know what you’re doing you can copy and paste those two bits, but…(and this is a great help)…
If you download, it downloads three things (zipped as one – you have to unpack them once they’re downloaded – I tried it without and it didn’t work!!!)
1. An index.html file
2. An Images folder – there you’ll find the menu image
3. A CSS folder – there you’ll find the external CSS file. There’s a bit of ‘chat’ at the top, then you’ll see the li (list item) instructions etc.
The BRILLIANT thing about this is that you get to see an html file with the CSS file all working – you can build on from that using the syntax they use. It’s a really good learning tool.
