Programming Reference Sheets: CSS

admin

Administrator
Staff member
CSS stands for Cascading Style Sheets<br /><br />/* comments */<br /><br />all numbers in css can be written dynamically as a percent #(%) or as a static pixel count (#px)<br />-other supported measurements include: in, cm, mm, em (current element font size), ex (half current font height), pc (pica)<br /><br />colors can be specified by #rrggbb notation or rgb(rr,gg,bb) notation [numbers or %] or with 1 of 147 supported color names<br /><br />the last attribute within an ID, class, etc does not require a ;, the ending } is enough<br /><br />you may also join commands to the same attribute list: h1,h2{}<br /><br /><br />//inline code in head /head tags:<br /><style type="text/css"><br /><!--css code here !><br /></style><br /><br />//seperate file css in head /head tags:<br /><link href=http://www.dreamincode.net/forums/"file_name.css" rel="stylesheet" type="text/css"><br /><br />//create ID:<br />#id_name{ //attributes; }<br /><br />//ID use:<br /><div ID="id_name"></div><br />//all items in the div will have attributes of id_name<br /><br />//attatching attributes to existing commands:<br />//by leaving out the # it is assumed each time key word is typed<br />body { //attributes }<br />a { //attributes } //includes all commands: p, table, tr, td, etc<br /><br />//create classes (ex for p command):<br />p.name_of_class { //attributes; }<br /><br />//use classes:<br /><p class="name_of_class"> //since it is attatched to p, only the p command can invoke this set of attributes<br /><br /><br />//Attributes:<br />//*Note that the ordering of attributes can change the look of the end result<br />padding: #,#,#,#; //universal padding (top, left, bottom, right)<br />padding-left: #; //left padding<br />padding-right: #; //right padding<br />padding-top: #; //top padding<br />padding-botton: #; //bottom padding<br /><br />position: keyword; //replace keyword with one of:absolute, static, relative, fixed <br />//absolute requires the placement be given eg: left #; top #;<br /><br />margin: #; universal margin<br />margin-top: #; //top margin<br />margin-left: #; //left margin<br />margin-right: #; //right margin<br /><br />//background (used in the body{})<br />background-image: url('image.jpg'); //sets the background to image.jpg<br /><br />//repeat the image:<br />background-repeat: repeat; //to repeat vertically use repeat-y, and horizontal repeat-x<br />//to ensure no repeat use no-repeat<br />//to keep the image from moving use fixed<br /><br />//position a single background image:<br />background-position: center //or left, right, top, bottom<br /><br />//boders:<br />border-style: dotted; //other styles available: dashed, solid, double, groove, ridge, inset, outset<br /><br />//boder colors:<br />border-color: #000000<br />border-color: #000000 #000000<br />border-color: #000000 #000000 #000000<br />border-color: #000000 #000000 #000000 #000000 //each sets pairs or single colors<br /><br />//lists:<br />list-style-type: disc; //also available: circle, square, none<br />list-style: url('image.gif') //supply your own image for bullet points<br /><br /><br /><br /><br />i noticed little work being done on the php reference sheet, so i posted a long list there, now i've started this one <img src="http://static.dreamincode.net/forums/style_emoticons/default/smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" /><br /><br />txt file of above:<a href="http://www.dreamincode.net/forums/index.php?s=db81c24a69d9cdf2544e598ba621c950&act=Attach&type=post&id=3658" title="Download attachment" target="_blank"><img src="http://static.dreamincode.net/forums/style_images/dic2.1.6b/folder_mime_types/txt.gif" alt="Attached File" /></a>
 <a href="http://www.dreamincode.net/forums/index.php?s=db81c24a69d9cdf2544e598ba621c950&act=Attach&type=post&id=3658" title="Download attachment" target="_blank">CSS_Reference_Sheet.txt</a> ( 2.7k )
<span class="desc">Number of downloads: 90</span><br /><br /><br /><span class='edit'>This post has been edited by <b>William_Wilson</b>: 28 Nov, 2006 - 09:05 PM</span>
</div>
 
Back
Top