CSS: Cascading Style Sheets
This is basically a file that you place in the main directory, and every single page has a special link in that page's header. (I can look this up for you if you need it)
I'll post code from Shattered Realms CSS sheet, and then explain it.
And yes for all you smart asses I know I put PHP in the code box :P
------------------
PHP:
<style type="text/css">
body {
background-color: #A3A2A2;
}
.style5 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
.over { background-color: #8D8D8D; }
.out { }
a:link {
color : #000000;
text-decoration : none;
}
a:visited {
color : #000000;
text-decoration : none;
}
a:active {
color : #000000;
text-decoration : none;
}
a:hover {
color :#FFFFFF;
text-decoration : none;
}
</style>
-----------------
Ok every "sheet" starts off with <style type=">
This tells the browser if its text related, or javascript related etc.
The most common is <style type=text/css>
In other words, all of the following code will effect the text and tables of the site.
PHP:
body {
background-color: #A3A2A2;
}
The first bit of the code tells the browser and all the pages linked to the sheet that the background colour is #A3A2A2, which is the light grey.
Simple enough.
Now if you were to change that number on the CSS to say, #666666, which is a very dark grey, and save it, every single page would automatically have this dark grey background.
Next part
PHP:
.style5 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
This is basically saying that any text assigned the ".style5" will be Arial, Helvetica..... with a font size of 14px.
So then all you do is select the text on the pages and assign ".style5" for this parargraph, then for example ".style7" which is impact font and very large, to this part.
It saves a lot of time editing a lot of text as you haven't got to manually assign a size, font, colour each time you want to change it.
And of course you can always update the code in the CSS to make site wide changes in seconds.
The next part,
PHP:
<!--
.over { background-color: #8D8D8D; }
.out { }
-->
a:link {
color : #000000;
text-decoration : none;
}
a:visited {
color : #000000;
text-decoration : none;
}
a:active {
color : #000000;
text-decoration : none;
}
a:hover {
color :#FFFFFF;
text-decoration : none;
}
is slightly more advanced. The first piece with the "
PHP:
<!--
.over { background-color: #8D8D8D; }
.out { }
-->
is basically saying that any cell in the tables on any of the page wil l have that colour *8D8D8D as a background when the mouse goes ".over" the cell. Like on our site.
And the ".out" is the colour it changes to when the mouse leaves the area.
Again changing this colour will make system wide changes.
The last bit, with "link, visited, over, down" is a type of hyper link formatting.
In other words, any "Link" will have the colour, size, font and "decoration" you choose. (decoration being underlined, bold etc).
Hover is the style of link that occurs when the mouse hovers over the link.
For example it might go bold or change colour (black to white in our site).
Down is when the mouse is clicked, Its not a very popular attribute though.
And Visited is the style the link remains after it has been clicked.
And don't forget to end the sheet with </style>
and it goes inbetween the <head></head> tags.
Hope this helps, Sniper can help you with PHP.
