CSS - Beginners Guide (2nd Shot)
Right I'm giving the CSS tutorial a second shot as I now know how to use CSS.
If it's just a small bit of CSS, firstly, you'll probably want to put it in the style tags:
Code:
<style>
Style Rules Here
</style>
But if it's a reasonably large bit of CSS, you'll need to make a .css file and you'll need to link it t you main page of couse by utting this in your <head> secton:
Code:
<link rel=STYLESHEET href="css.css">
Now onto the style rules.
Let's start with fonts. Inside the .css file or the <style></style> tags you'll need a section called body. Examine:
Code:
<style>
body {
Style Rules Here
}
</style>
And for different fonts you'll want this: font-family:FONTNAMEHERE; put in like this:
Code:
<style>
body {
font-family: Verdana;
}
</style>
Font size:
Code:
<style>
body {
font-family: Verdana;
font-size: 11pt;
}
</style>
font-color isn't a valid CSS code so after a couple font codes just put:
Code:
<style>
body {
font-family: Verdana;
font-size: 11pt;
color: #FFFFFF;
}
</style>
Also for bold, italic etc. you'll need different tags.
font-weight:bold; or you can have bolder, lighter or any number I think it's between 100 and 900.
font-style:italic; or you can have oblique or none. I haven't noticed any difference between italic and oblique but I think they're for different browsers.
For links you can have 4 different types:
- A:link - standard, unclicked link.
- A:hover - what happens to it when the mouse hovers over it.
- A:active - an active link. It becomes active after being clicked.
- A:visited - a visited link.
What many people do with the A:hover tag is they make it underlined and overlined. For both rules use this:
text-decoration:underline overline;
then continue.
Also you may have noticed that some sites have a different cursor. There are 25 different cursors (23 of which work for me so I won't mention the ones that don't work for me).
cursor: default;
cursor: crosshair;
cursor: hand;
cursor: pointer;
cursor: move;
cursor: text;
cursor: wait;
cursor: help;
cursor: n-resize;
cursor: ne-resize;
cursor: e-resize;
cursor: se-resize;
cursor: s-resize;
cursor: sw-resize;
cursor: w-resize;
cursor: nw-resize;
cursor: progress;
cursor: not-allowed;
cursor: no-drop;
cursor: vertical-text;
cursor: all-scroll;
cursor: col-resize;
cursor: row-resize;
That's some simple CSS for you. For more in depth CSS (and images for the cursors) go to Echo Echo
