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/htmlcss
But 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>
<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");}
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>
<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.
No comments:
Post a Comment
Please let me know if you have any thoughts on this post...