Huge Introduction To CSS

Printable View

30-01-2006, 04:12 AM
Oracle:

Huge Introduction To CSS
Hello.

This is my second tutorial and as I can't sleep i've decided to write this one about CSS ( Cascading Style Sheets )

CSS has both advantages and disadvantages. I've listed them below.

Advangtages:
- Good for layouts
- Better loading time
- Edit one page for all pages
Disadvantages
- Older browsers don't accept CSS sometimes.
This tutorial is Copyright to me and if you wish to use it please contact me.

To begin CSS there are a few ways to write it into your webpages. They are all nested withing the <head></head> tags.

The best way is:

Code:

<link rel="stylesheet" type="text/css" href="URL to .CSS file" />

This is the external stylesheet so your index code is clean and easier and also you can edit your whole site with just one page.

You start of with the basic codes and it gets easier for example the first code I always include in my CSS page is the page background and font settings:

Code:

body{ background-color: red/green/blue/black; margin: marginsizepx; font-size: fontsizepx; color: green/purple/pink/black; }

The value is pretty important in these, here is a list of the values:
- pixels
- percent
- inches
- centimetres
- Millimetres
There may be more but I won't go into detail.

Now there are classes and ID's and I tend to use ID's more as i'm into CSS layouts. Here is an example of both.

Code:

.navigation{ color: #colour; font-family: 'font'; font-size: sizepx; }

Then you can link to the classes in both HTML and CSS

Code:

<td class="navigation"></td> <div class="navigation"></div>

It's actually really basic to do this now onto ID's which I use more.

Code:

#navigation{ width: 550px; background-color: red; }

I just used some basic properties so you get the jist of the idea. Now you link to it in your index.php

Code:

<div id="navigation"></div>

In CSS, pseudo classes are used to add different styles to selectors.

Here is an example:

Code:

a:link{ color: white;} Unvisited link a:visited{ color: black; } visited link a:hover{ color: pink;} mouse hovered on link a:active{ color: green;} color while clicked.

This is the most used in the pseudo classes.

These are just more examples of what you can do in CSS

Code:

p{ color: black; } p:first-line{ color: red; }

And then the font size.

Code:

p{ font-size: 12px; } p:font-letter{ font-size: 10px; }

Again i've used random values so you get the jist.

Some basic codes for your everyday needs in CSS are:

Code:

body{ background-color: #FFFFFF; }

This is setting the background colour and now to set the background image code is:

Code:

body{ background-image: url(image.gif); }

Then there are things you can add onto the background image like no repeat

Code:

background-repeat: repeat-x/y;

This is it for the whole introduction I may be posting a more advanced CSS tutorial and also other advanced things such as a massive layout tutorial using just XHTML/CSS

Thanks
Dan
30-01-2006, 08:37 PM
Mentor

For a huge one i was kinda exspecting more than a 15 second overview of some of its most basic consepts "/
30-01-2006, 08:51 PM
Mentor

-Fecking lagged server, i have about 8 of every post i was makeing "/ -
31-01-2006, 01:06 PM
Coding4Newbs

Quote:

Originally Posted by 01101101entor

-Fecking lagged server, i have about 8 of every post i was makeing "/ -

Lmao carl,

Css is so easy i didnt even study it and i learnt it without 1 tutorial :) mwhahahaha, but this is good for newbies good try :)
31-01-2006, 04:39 PM
Oracle:

Hello.

Sorry again if I mis used the concept 'Huge' it's merely a relevent tutorial of basic concepts into the CSS language.

It seems that people aren't too thankful here but oh well. I try my best :)

Thanks
Dan
31-01-2006, 04:41 PM
Splinter

I pretty much worked out css "/ just looking at abit of basic code
31-01-2006, 04:48 PM
DanWilliamson

Hey,

Agreed. I've seen far better tutorials than that.

- Dan

Quote:

Originally Posted by Splinter

I pretty much worked out css "/ just looking at abit of basic code
31-01-2006, 04:53 PM
Anderman

This made me smile

Quote:

Older browsers don't accept CSS sometimes.

CSS Has been around since your were about 4 so i wouldnt bet on thhat
31-01-2006, 05:19 PM
Dakara

Quote:

Originally Posted by Anderman

This made me smile

CSS Has been around since your were about 4 so i wouldnt bet on thhat

Style sheets have been around since the begining of SGML.
31-01-2006, 05:44 PM
Olii

Good Tutorial if your a begginer. If it was one year back I would be looking all over forums for that kinda stuff. I don't believe its simple, just right for a begginer. If the begginer wants to go further, then they can go and look for codes on other places of the web

- Oli
31-01-2006, 07:56 PM
Michael.

Quote:

Older browsers don't accept CSS sometimes.

If you're still on Windows NT & Internet Explorer V1.
31-01-2006, 08:09 PM
Dan Williamson

Hey,

ROFL!

The good old days :)

- Dan

Quote:

Originally Posted by Michael.

If you're still on Windows NT & Internet Explorer V1.
31-01-2006, 09:03 PM
Mentor

Quote:

Originally Posted by Olii

Good Tutorial if your a begginer. If it was one year back I would be looking all over forums for that kinda stuff. I don't believe its simple, just right for a begginer. If the begginer wants to go further, then they can go and look for codes on other places of the web

- Oli

Look as much as alot of people suck up, i prefer to actaly give credit when its due, so it worth somthing rather tha being meaningless.
If id never seen css before this woulnt have helped in the sligtest, it gives no refernce or even the romoste consept of any practal use for it, or what its capable of and what can be done with it "/
if people spend time and make a good tutoral, yea they get prases, if they just make quick ones to gain a rep whcih aint realy helpful, no i dont "/
31-01-2006, 09:05 PM
ADAM:

Im new to css and im learning it, Thanks mate it will help me out with some bits :D