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 pagesDisadvantages
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:
<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:
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
MillimetresThere 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.
.navigation{
color: #colour;
font-family: 'font';
font-size: sizepx;
}
Then you can link to the classes in both HTML and CSS
<td class="navigation"></td>
<div class="navigation"></div>
It's actually really basic to do this now onto ID's which I use more.
#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
<div id="navigation"></div>
In CSS, pseudo classes are used to add different styles to selectors.
Here is an example:
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
p{
color: black;
}
p:first-line{
color: red;
}
And then the font size.
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:
body{
background-color: #FFFFFF;
}
This is setting the background colour and now to set the background image code is:
body{
background-image: url(image.gif);
}
Then there are things you can add onto the background image like no repeat
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
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 pagesDisadvantages
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:
<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:
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
MillimetresThere 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.
.navigation{
color: #colour;
font-family: 'font';
font-size: sizepx;
}
Then you can link to the classes in both HTML and CSS
<td class="navigation"></td>
<div class="navigation"></div>
It's actually really basic to do this now onto ID's which I use more.
#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
<div id="navigation"></div>
In CSS, pseudo classes are used to add different styles to selectors.
Here is an example:
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
p{
color: black;
}
p:first-line{
color: red;
}
And then the font size.
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:
body{
background-color: #FFFFFF;
}
This is setting the background colour and now to set the background image code is:
body{
background-image: url(image.gif);
}
Then there are things you can add onto the background image like no repeat
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