Huge Introduction To CSS

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

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

Mentor · 30-01-2006, 08:37 PM

For a huge one i was kinda exspecting more than a 15 second overview of some of its most basic consepts "/

Mentor · 30-01-2006, 08:51 PM

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

Coding4Newbs · 31-01-2006, 01:06 PM

Originally Posted by 01101101entor

-****ing 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

~~Oracle:~~ · 31-01-2006, 04:39 PM

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

Splinter · 31-01-2006, 04:41 PM

I pretty much worked out css "/ just looking at abit of basic code

~~DanWilliamson~~ · 31-01-2006, 04:48 PM

Hey,

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

- Dan

Originally Posted by Splinter

I pretty much worked out css "/ just looking at abit of basic code

Anderman · 31-01-2006, 04:53 PM

This made me smile

Older browsers don't accept CSS sometimes.

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

Dakara · 31-01-2006, 05:19 PM

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.

Olii · 31-01-2006, 05:44 PM

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

Thread: Huge Introduction To CSS

Thread Tools

Huge Introduction To CSS

Posting Permissions