Full Version: Programming Reference Sheets: CSS
Dream.In.Code > Programming Help > Other Languages
William_Wilson
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 smile.gif

txt file of above:Click to view attachment
ReggaetonKing
Pretty good!
William_Wilson
thanks, i didn't have that much time to work on it so i may go over it and explain things better
skyhawk133
William, we can finish this up if we can add some more... maybe some more styles (i.e. fonts, positioning, etc.)
static-dragon
looking pretty good, the finish product will be great to have on hand
William_Wilson
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.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.