CSS - Beginners Guide (2nd Shot)

Sketti · 24-03-2005, 08:43 AM

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:

Aink - 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

splintercell! · 24-03-2005, 08:49 AM

Post it now eh! I just had to work It all out for myself

ignitionhost · 24-03-2005, 09:21 AM

Nice guide, if it's popular enough, it may be pinned

I think it should anyway

Sketti · 24-03-2005, 12:47 PM

Thanks. I was gonna put the cursor images in but it said there were too many of thwm.

-JT- · 24-03-2005, 04:24 PM

Okay, it looks like alot of effort has went into this so i will pinn it

Well done.

Sketti · 24-03-2005, 05:44 PM

Thanks <James> and sorry Splinter. I've been practicing other stuff lately and I just thought I'd rewrite it now.

-JT- · 24-03-2005, 06:06 PM

np mans!!!

splintercell! · 24-03-2005, 09:49 PM

Lol one thing

Olny stupid but you didnt close the <script> tags and stupid peole woudnt know this

Sketti · 25-03-2005, 07:52 AM

Originally Posted by Splintercell!

Olny stupid but you didnt close the <script> tags

The script tags?

jamie5k · 25-03-2005, 08:49 AM

splinter this isnt a script its a style he has the <style> tags not scripts.

Thread: CSS - Beginners Guide (2nd Shot)

Thread Tools

CSS - Beginners Guide (2nd Shot)

Posting Permissions