PDA

View Full Version : CSS - Begginners Guide



Sketti
27-02-2005, 06:21 PM
CSS

CSS stands for Cascading Style Sheet and is used for website colour rules.

CSS is helpful for colour rules so you don’t have to put the same bit of HTML in on every single page you have on your website. The only things’ it needs, for an external CSS, is itself and one tiny bit of HTML with goes after the <head> tag – not the </head> tag:

<link rel=stylesheet type=”text/css” href=”CSS NAME HERE.css”>

For an internal CSS, again it goes after the <head> tag – not the </head> tag – but instead of the HTML tag I just put for you there you put the whole CSS – like this:

<style><!—CSS GOES HERE--!></style>

So your HTML should look a bit like this:

<html>
<head>
<style><!—CSS GOES HERE--!></style>
<title>TITLE GOES HERE</title>

etcetera, etcetera.

External CSS template

a:link
{
color: rgb(0,0,0);
}
a:visited
{
color: rgb(0,0,0);
}
a:active
{
color: rgb(0,0,0);
}
table
{
table-border-color-light: rgb(0,0,0);
table-border-color-dark: rgb(0,0,0);
}
body
{
font-family: Verdana, Arial, Helvetica;
background-color: rgb(0,0,0);
color: rgb(0,0,0);
}

h1
{
font-family: Times New Roman, Times;
color: rgb(0,0,0);
}
h2
{
font-family: Times New Roman, Times;
color: rgb(0,0,0);
}
h3
{
font-family: Times New Roman, Times;
color: rgb(0,0,0);
}
h4
{
font-family: Times New Roman, Times;
color: rgb(0,0,0);
}
h5
{
font-family: Times New Roman, Times;
color: rgb(0,0,0);
}
h6
{
font-family: Times New Roman, Times;
color: rgb(0,0,0);
}

Just change the 0’s to any number between 0 and 255 using the red, blue, green colour style and change the font families to the fonts that you want.


Internal CSS template

<style>
<!--
BODY
{scrollbar-face-color: #CCCCCC;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #DCDCDC;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #AAAAAA;}

.main {font: 10px verdana;}
.pagename {font: 14px verdana; color: #2F4A7F; font-weight: bold;}
.style3 {color: #000000}
-->
</style>

That's the internal CSS for another site of mine - Randomness (http://www.radomness.uk.tt) - change it as you want and add some more CSS on.
Remember! I goes inside the <head> tag!

Well I hope that helps you folks!

iRoss
27-02-2005, 06:25 PM
<STYLE>
A {

text-decoration: none;

}
</STYLE>

That's The Non-Underlined HyperLinks CSS :eusa_danc

Sketti
27-02-2005, 06:28 PM
Thanks, Ross. =]

-JT-
27-02-2005, 06:34 PM
you got it wrong dude. Css doesnt change the colour rules of a webpage. Css changes the pages "style" this includes border types, cell padding and all sorts of other variables. Good try though.

iRoss
27-02-2005, 06:50 PM
It also aligns images properly :)

My Pleasure >.<

-JT-
27-02-2005, 06:52 PM
well done ross, but lets not put this dude down, he did a not bad job of teaching us summit.

iRoss
27-02-2005, 06:59 PM
:) You can put my medal in the post :D :o james, you got 1000 posts! join the club >.< !

Mentor
27-02-2005, 08:09 PM
I dont quite get the point? if someone doesnt know css or how it works this is usless to them, and if they do they would alredy know if.

A tutrils only useful if you get an explintion to what your doing.

Athogh its still a good effort

splintercell!
28-02-2005, 09:26 PM
Instead of putting the CSS into the page isnt it possible to extract is from somewhere else using the <source></source> tags :S or something along those lines..

Want to hide these adverts? Register an account for free!