Post by russellr on Sept 30, 2010 18:27:42 GMT
CSS Tutorial By Russell
Most of you will not need this but this may help a few people (hopefully!) I'll go from the start to give you a nice idea of exactly what you can do with CSS.
Classes / ID's / Other
Every web page is page up of these as each Table, TD, TR or Div will most of the time have an ID or a class this is shown in the CSS by two different starting symbols.
For a Class it is simply a dot: .ClassName
For an ID is: #ClassName
Now the part there ClassName could be anything that you want to call it although it's always best to keep it nice and short and as descriptive as possible which is why you get names such as: titlebg, title2bg, catbg, windowbg and so on.
Where does this go?
All CSS coding should be in the head (within the HTML <head>tags</head>) of your document. Not only that it should also be situated nicely between <style>tags</style> with me still...yes? good.
What can you do with CSS
There are many many things you can use CSS for and I will explain a few of the most used css attributes:
Most of you will not need this but this may help a few people (hopefully!) I'll go from the start to give you a nice idea of exactly what you can do with CSS.
Classes / ID's / Other
Every web page is page up of these as each Table, TD, TR or Div will most of the time have an ID or a class this is shown in the CSS by two different starting symbols.
For a Class it is simply a dot: .ClassName
For an ID is: #ClassName
Now the part there ClassName could be anything that you want to call it although it's always best to keep it nice and short and as descriptive as possible which is why you get names such as: titlebg, title2bg, catbg, windowbg and so on.
Where does this go?
All CSS coding should be in the head (within the HTML <head>tags</head>) of your document. Not only that it should also be situated nicely between <style>tags</style> with me still...yes? good.
What can you do with CSS
There are many many things you can use CSS for and I will explain a few of the most used css attributes:
Remember all of these will need some : right after the attribute name and after you have entered your info close it of with ;
- background-color
This is a nice and simple one, so long as you have a good idea about HEX colour codes if not you can just write a colour in here such a blue or red and so on. - font-size
This is very similar to before just enter a number and then px, pt or em best to use px as chances are this will tie in with the rest of your sizes and then chose the font size and it changes the font size! - color
Make sure you spell it like that for some of you that is correct anyway but this will change the colour of the text within this specific class or body etc... like background-color you can use a hex colour or just wrie a colour in there like blue or anything. - padding
This is a handy one for me i use this quite a lot use a number here 3 for example and then px or something and it will space out from the content in every side for that amount, you can be more specifc and enter padding-left/right/bottom/top if you need to. - display
this again is a good one for many things such as inline content, JS hide/show scripts hidden content etc... you can put things like block for normal displayed content, none this will hide the content and inline which is good for using with things such a float and clear later on in a document. - letter-spacing
This spaces out between letters can look good in some websites/forums and can be addition so long as its not overused, word-spacing in very similar to this. - border
This will add a border to your element you can define many things such the width, style solid dashed dotted colour etc... an example of this would be something likeborder:1px dotted #FFFFFF;this will add you guessed it a 1 pixel dotted white border all the way around the element.
That is all for now if you need anymore CSS tips just let me know and remember every CSS style should look a bit like this:<style>
#MyId{color:#000000;}</style>
As you can see you open and close everything < and </ then { and } also : and ;
