Programming Reference Sheets: CSS

CSS Reference sheet, started as promised

Page 1 of 1

5 Replies - 3462 Views - Last Post: 12 October 2007 - 02:06 PM Rate Topic: -----

#1 William_Wilson   User is offline

  • lost in compilation
  • member icon

Reputation: 207
  • View blog
  • Posts: 4,812
  • Joined: 23-December 05

Programming Reference Sheets: CSS

Posted 28 November 2006 - 09:03 PM

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:Attached File  CSS_Reference_Sheet.txt (2.7K)
Number of downloads: 238

This post has been edited by William_Wilson: 28 November 2006 - 09:05 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Programming Reference Sheets: CSS

#2 ReggaetonKing   User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 73
  • Joined: 16-November 06

Re: Programming Reference Sheets: CSS

Posted 28 November 2006 - 10:00 PM

Pretty good!
Was This Post Helpful? 0
  • +
  • -

#3 William_Wilson   User is offline

  • lost in compilation
  • member icon

Reputation: 207
  • View blog
  • Posts: 4,812
  • Joined: 23-December 05

Re: Programming Reference Sheets: CSS

Posted 29 November 2006 - 09:19 AM

thanks, i didn't have that much time to work on it so i may go over it and explain things better
Was This Post Helpful? 0
  • +
  • -

#4 skyhawk133   User is offline

  • Head DIC Head
  • member icon

Reputation: 1963
  • View blog
  • Posts: 20,421
  • Joined: 17-March 01

Re: Programming Reference Sheets: CSS

Posted 20 August 2007 - 08:47 AM

William, we can finish this up if we can add some more... maybe some more styles (i.e. fonts, positioning, etc.)
Was This Post Helpful? 0
  • +
  • -

#5 static-dragon   User is offline

  • New D.I.C Head
  • member icon

Reputation: 0
  • View blog
  • Posts: 43
  • Joined: 10-July 07

Re: Programming Reference Sheets: CSS

Posted 29 August 2007 - 10:37 AM

looking pretty good, the finish product will be great to have on hand
Was This Post Helpful? 0
  • +
  • -

#6 William_Wilson   User is offline

  • lost in compilation
  • member icon

Reputation: 207
  • View blog
  • Posts: 4,812
  • Joined: 23-December 05

Re: Programming Reference Sheets: CSS

Posted 12 October 2007 - 02:06 PM

It is now listed as a google doc (i also fixed the spelling mistakes)
http://docs.google.c...dzd3jc2_0hmhws6

if anyone wants to post some of the necessary additions feel free, otherwise i'll get to it in a week or so.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1