Raremandan
13-03-2006, 08:56 PM
Well I have been extremely bored for a while, and as I have quite good knowledge on this subject; I have attempted at writing a half-decent tutorial.
Many of you will find this long, but I assure you this is not long compared to some things I have read about in CSS.
What is CSS?
CSS is actually 'Cascading Stylesheets' which is used to style webpages, it also has the advantage of edited 10 webpages with just one link on each of them. The code to actually do this; is:
<link rel="stylesheet" type="text/css" href="main.css" />
Of course like any external Javascript file or anything like that, you change the name and directory as needed.
Structure of CSS
Really the structure of CSS is broken down into three main things, the selector, the property and the value, here is a brieft example and explanation of all these things.
The selector is what you want the style to apply to, so basically its any html tag all be it from tds, the li's and so on and so on.
body{
background-color: #000000;
}
This is selecting one, although you can select more than one, this saves writing out lots of code and is more efficient in my view.
body, td{
background-color: #000000;
}
I have used the background-color property as it is an easyish one which will be remembered as most people will use this. For a full reference on different properties look http://www.w3schools.com/css/css_reference.asp
The value is, from percentage or pixels which are the two main used ones, I have found a nice list of them though here:
pixels (px)
percent(%)
em, one em is the same as the font size of the current element
inches(in)
centimeters(cm)
millimeters(mm)
points (pt)one pt is equivalent of 1/72 inches.
pica(pc) equal to 12 points.
Reminder!
Reminder about the semi colon, much like in PHP the semi-colon actually splits the code up so after every property you must use a ; and then write the next one.
ID's and Classes
Classes and ID's have played a big part in CSS for me over the past year and they're good for use with even tables if you are still using tables.
.class1{
background-color: #000000;
}
Now this is a basic class, you can tell this by the . at the beginning and this is used to add style to tables as well as various other things, to add the style of class one to a table simple put into your table code:
<td class="class1"></td>
Or to even execute that in a rather large table situation even just once or twice:
<table>
<tr>
<td class="class1">Content</td>
<td>Content</td>
</tr>
</table>
See how simple it actually is. You can also select Classes for your own styling needs so to say with:
<div class="class1"></div>
Moving onto ID's more, many people seem to use ID's more but I tend to use both an equal amount, they're both extremely good.
#id1{
background-color: #000000;
}
You can always recongnise the ID by the # sign unless it's a hexademical code or something else, now to select the actual ID in your XHTML document.
<div id="id1"></div>
A few good code snippets:
a:link{
color: #;
}
a:visited{
color: #;
}
a:hover{
color: #;
}
a:active{
color: #;
}
This is for your link customization, I was in two minds whether to add the actual Scrollbar feature, but as it's only in IE I found it pointless to add it.
Bare in mind this is only a short introduction, and I may create a longer more advanced one very soon.
Thanks
Raremandan
Many of you will find this long, but I assure you this is not long compared to some things I have read about in CSS.
What is CSS?
CSS is actually 'Cascading Stylesheets' which is used to style webpages, it also has the advantage of edited 10 webpages with just one link on each of them. The code to actually do this; is:
<link rel="stylesheet" type="text/css" href="main.css" />
Of course like any external Javascript file or anything like that, you change the name and directory as needed.
Structure of CSS
Really the structure of CSS is broken down into three main things, the selector, the property and the value, here is a brieft example and explanation of all these things.
The selector is what you want the style to apply to, so basically its any html tag all be it from tds, the li's and so on and so on.
body{
background-color: #000000;
}
This is selecting one, although you can select more than one, this saves writing out lots of code and is more efficient in my view.
body, td{
background-color: #000000;
}
I have used the background-color property as it is an easyish one which will be remembered as most people will use this. For a full reference on different properties look http://www.w3schools.com/css/css_reference.asp
The value is, from percentage or pixels which are the two main used ones, I have found a nice list of them though here:
pixels (px)
percent(%)
em, one em is the same as the font size of the current element
inches(in)
centimeters(cm)
millimeters(mm)
points (pt)one pt is equivalent of 1/72 inches.
pica(pc) equal to 12 points.
Reminder!
Reminder about the semi colon, much like in PHP the semi-colon actually splits the code up so after every property you must use a ; and then write the next one.
ID's and Classes
Classes and ID's have played a big part in CSS for me over the past year and they're good for use with even tables if you are still using tables.
.class1{
background-color: #000000;
}
Now this is a basic class, you can tell this by the . at the beginning and this is used to add style to tables as well as various other things, to add the style of class one to a table simple put into your table code:
<td class="class1"></td>
Or to even execute that in a rather large table situation even just once or twice:
<table>
<tr>
<td class="class1">Content</td>
<td>Content</td>
</tr>
</table>
See how simple it actually is. You can also select Classes for your own styling needs so to say with:
<div class="class1"></div>
Moving onto ID's more, many people seem to use ID's more but I tend to use both an equal amount, they're both extremely good.
#id1{
background-color: #000000;
}
You can always recongnise the ID by the # sign unless it's a hexademical code or something else, now to select the actual ID in your XHTML document.
<div id="id1"></div>
A few good code snippets:
a:link{
color: #;
}
a:visited{
color: #;
}
a:hover{
color: #;
}
a:active{
color: #;
}
This is for your link customization, I was in two minds whether to add the actual Scrollbar feature, but as it's only in IE I found it pointless to add it.
Bare in mind this is only a short introduction, and I may create a longer more advanced one very soon.
Thanks
Raremandan