CSS is a way to change the look of certain elements of your page (e.g background, header 1, links, etc). This tutorial will teach
you how to use CSS and to write it.
Open ‘Notepad’ (found at start > all programs > accessories or for mac, finder > appications > textedit) so that you can practise what you learn.
This is what the page would be like with the css code below (have a look at the code and see different elements of it):
Okay, let’s split it up and take it step by step.
body { background:#000000; color:#FFFFFF; font-size:7pt; font-family:tahoma; line-height:7pt; margin-top:-18px; }
‘Body’ indicates we are working with the main webpage (or the body of the page). This deals with backgrounds and unclassified text.
background:#000000 is telling the computer to turn the background to a certain colour. The code for black is six 0’s and the code for white (which is default) is six F’s. You can set this to any colour you want, provided you know the codes. If you don’t want a specific colour, you could just type the name of it (e.g red, white, green, yellow) and that would work, but you would not choose which shade it would come as.
color is, using the same codes as background, to set the colour of your text. font-family and font-size sets the font and the size (in points – pt) of this text. The line-height controls the gap between to lines of text (the bigger the number, the bigger the gap). And finally, margin controls how far from top, bottom, left and/or right the text/table is.
Now for the next bit:
h1 { color:#FFFFFF; font-size:10pt; font-family:tahoma; line-height:10pt; } h2 { color:#FFFFFF; font-size:7pt; font-family:tahoma; line-height:7pt; margin-top:-18px; }
h1 and h2 stand for header 1 and header 2. Basically, they are two different titles, perhaps subtitles. Using css, you can make these headers whatever you want them to be.
The options on these are the same as that of the body css. There is color, which sets the colour of the text, font-size and font-family setting the size and font of the text and line-height, controling the height of each line. You can also add more, like background or text-transform, but I won’t go into that. You can always ask about that later.
So, what is the difference between body text and header text? Well, nothing if you set the css to be the same, but there would be no point in doing that. Headers are for making titles, whereas body text is for normal text that you put under the headers. But, how do you define headers from body text?
For header text you must put…
< H1 > Header Text < / H1 > or < H2 >Header 2 Text< / H2 > without the spaces
For body text, you do not need to do anything. Any text that is not defined, will be classified as body text.
There is so much more that can be done using css, but this is just the basics. If you want to go a step futher, feel free to contact me about it. I’d be happy to help. Using what you have learnt in this tutorial, you can now use css to set the design of your page. I urge you to ask for help if you get stuck with anything.
Finally, copy the code and play around with it, it will help you learn so much more than just reading about it. You can upload the code you copied (after pasting it into Notepad or TextEdit) to your website via FTP or an online editor so that you can view it live.
This is a template code split up for you with directions to help:
Any < / br > , < p > or < / p > in this code are not part of the css so you may remove them. However, they should not have any effect on the css.
Thank you for reading this tutorial, I hope it helped!