CSS stands for Cascading Style Sheets

/* comments */

all numbers in css can be written dynamically as a percent #(%) or as a static pixel count (#px)
-other supported measurements include: in, cm, mm, em (current element font size), ex (half current font height), pc (pica)

colors can be specified by #rrggbb notation or rgb(rr,gg,bb) notation [numbers or %] or with 1 of 147 supported color names

the last attribute within an ID, class, etc does not require a ;, the ending } is enough

you may also join commands to the same attribute list: h1,h2{}


//inline code in head /head tags:
<style type="text/css">
<!--css code here !>
</style>

//seperate file css in head /head tags:
<link href="file_name.css" rel="stylesheet" type="text/css">

//create ID:
#id_name{ //attributes; }

//ID use:
<div ID="id_name"></div>
//all items in the div will have attributes of id_name

//attatching attributes to existing commands:
//by leaving out the # it is assumed each time key word is typed
body { //attributes }
a { //attributes } //includes all commands: p, table, tr, td, etc

//create classes (ex for p command):
p.name_of_class { //attributes; }

//use classes:
<p class="name_of_class"> //since it is attatched to p, only the p command can invoke this set of attributes


//Attributes:
//*Note that the ordering of attributes can change the look of the end result
padding: #,#,#,#; //universal padding (top, left, bottom, right)
padding-left: #; //left padding
padding-right: #; //right padding
padding-top: #; //top padding
padding-botton: #; //bottom padding

position: keyword; //replace keyword with one of:absolute, static, relative, fixed
//absolute requires the placement be given eg: left #; top #;

margin: #; universal margin
margin-top: #; //top margin
margin-left: #; //left margin
margin-right: #; //right margin

//background (used in the body{})
background-image: url('image.jpg'); //sets the background to image.jpg

//repeat the image:
background-repeat: repeat; //to repeat vertically use repeat-y, and horizontal repeat-x
//to ensure no repeat use no-repeat
//to keep the image from moving use fixed

//position a single background image:
background-position: center //or left, right, top, bottom

//boders:
border-style: dotted; //other styles available: dashed, solid, double, groove, ridge, inset, outset

//boder colors:
border-color: #000000
border-color: #000000 #000000
border-color: #000000 #000000 #000000
border-color: #000000 #000000 #000000 #000000 //each sets pairs or single colors

//lists:
list-style-type: disc; //also available: circle, square, none
list-style: url('image.gif') //supply your own image for bullet points




i noticed little work being done on the php reference sheet, so i posted a long list there, now i've started this one

txt file of above:  CSS_Reference_Sheet.txt ( 2.7k ) Number of downloads: 107


This post has been edited by William_Wilson: 28 Nov, 2006 - 08:05 PM

Pretty good!

thanks, i didn't have that much time to work on it so i may go over it and explain things better

William, we can finish this up if we can add some more... maybe some more styles (i.e. fonts, positioning, etc.)

looking pretty good, the finish product will be great to have on hand

It is now listed as a google doc (i also fixed the spelling mistakes)
http://docs.google.com/View?docid=ddzd3jc2_0hmhws6

if anyone wants to post some of the necessary additions feel free, otherwise i'll get to it in a week or so.