Differences

This shows you the differences between two versions of the page.

--- notes:css_cheat_sheet [2008/08/15 01:33]
smthng created
+++ notes:css_cheat_sheet [2008/08/21 00:18] (current)
smthng
@@ Line 10: / Line 10: @@
   * Styles define how to display HTML elements. Style sheets are collections of styles.
   * Multiple style sheets will cascade into a single style definition.
-  * Styles can be specified inside an HTML element, inside the <head> element or in an external CSS file - in that order of priority.
+  * There are 3 ways to specify styles (decreasing priority):
-  * CSS syntax is made up of three parts - selector {property: value}.
+    - inline as an element style attribute <code html> <p style="color: sienna>text</p></code>
-    * Multiple property-value pairs may be separated by semi-colons.
+    - in an internal style sheet in the head <code html>
-    * Multiple selectors must be separated by commas
+ <head> <style type="text/css">
-    * Values must be quoted if they are multiple words
+<!--
+hr {color: sienna}
+-->
+</style> </head></code>
+    - in an external style sheet in a css file <code html>
+<link rel="stylesheet" type="text/css"
+href="style.css" /> </code>
+==== CSS Syntax====
+CSS syntax is made up of three parts - selector {property: value}.
+  * Multiple property-value pairs may be separated by semi-colons.
+  * Multiple selectors must be separated by commas
+  * Values must be quoted if they are multiple words
   * A simple example <code html>
 h1,h2,h3 {
@@ Line 20: / Line 33: @@
 color: black;
 font-family: "sans serif" } </code>
+  * Classes allow groups of elements to share formatting e.g. <code html>
+p.right {text-align: right}
+.blue {color: blue}
+<p class="right blue">right-aligned blue text</p> </code>
+  * Styles can also match on attribute values or id e.g. <code html>
+input[type="text"] {background-color: blue}
+#id {background-color: blue}
+p#id {background-color: blue} </code>
+  * CSS uses C-style comments - /* comment */ .
+==== CSS Background/Text Properties ====
+  * Background properties examples <code html>
+background-color: black;
+background-image:  url('bg.jpg');
+background-repeat: repeat-[x|y]/no-repeat/repeat;
+background-attachment: fixed
+background-position: center/30% 20%/50px 100px;
+background: blue url('bg.gif') no-repeat fixed center;
+</code>
+  * Text properties examples <code html>
+color: #00ff00/green/rgb(0,255,0) ; text-shadow:blue;
+text-align: left/right/center/justify ; text-indent: 1cm;
+letter-spacing: 0.5cm/-3px ; line-height: 200%;
+white-space: nowrap ; word-spacing: 30px
+text-decoration: overline/line-through/underline/blink/none
+text-transform: uppercase/lowercase/capitalize
+</code>
+  * Font properties examples <code html>
+font-family: times/sans-serif ; font-size: 130%
+font-size-adjust: 0.60 ; font-variant: small-caps
+font-style: italic/oblique ; font-stretch: wider
+font-weight: bold/900
+font: italic small-caps 900 12px arial
+font: caption/icon/menu/message-box/small-caption/status-bar </code>
+==== CSS Border/List Properties ====
+  * Border properties examples (btlr=bottom/top/left/right. An outline occurs outside of the border. <code html>
+border-style: medium/solid/double/groove/dotted/
+  dashed/inset/outset;
+border-btlr: width style color ; border-btlr-style
+border-width:5px ; border-btlr-width: thick
+border-color: color x 4; border-btlr-color
+outline-color/style/width ; outline:color style width</code>
+  * A margin describes space around the element. Padding defines the space between border and content.<code html>
+margin: width x 4 (trbl); margin-btlr
+padding: width x 4 (trbl); padding-btlr</code>
+  * List properties examples <code html>
+list-style-type: disc/circle/square/none
+list-style-type: lower/upper-roman/alpha / decimal
+list-style-image: url('a.gif')
+list-style-position: inside/outside
+list-style: type position image</code>
+  * Table properties examples <code html>
+table-layout: automatic/fixed;
+border-collapse:collapse/separate; empty-cells:show/hide
+border-spacing: width x 2;caption-side: btlr
+</code>
+==== Sizing and Positioning CSS Properties ====
+  * Size properties examples <code html>
+height/width: auto/50%/100px
+min/max-height/width:none/50%/100px
+line-height: normal/100px/1/50%</code>
+  * Position properties <code html>
+display: inline/none/block (lots of others)
+float: btlr ;
+position: relative(to normal)/absolute(rel to block)
+  /fixed(rel to window, doesn't move)/static(normal) ;
+bottom/top/left/right: +/-100px/width
+vertical-align:top/bottom/text-top/text-bot/sub/super</code>
+  * Visibility properties <code html>
+visibility:visible/hidden/collapse (for table elems)
+clear:left/right/both/none (where floats aren't allowed)
+clip: rect(10px, 5px, 10px, 5px)
+overflow:auto/scroll/visible/hidden
+z-index: 1 (0 is normal) </code>
+==== Advanced CSS ====
+  * Pseudo classes can restrict the selector. a:hover and a:active may have to come after a:link and a:visited. <code html>
+selector.class:pseudo-class {property: value}
+a:link {color: #FF0000}   (unvisited link)
+a:visited {color: #00FF00}  (visited link)
+a:hover {color: blue}  (mouse-over element)
+a:active {color: #0000FF} (selected element)
+a:focus {color: #0000FF} (focused element - not in IE)
+p:first-child {font-weight:bold}
+p > em:first-child { } ; p:first-child em { }
+</code>
+  * Pseudo elements are dynamic elements <code html>
+p:first-letter {} ; p:first-line {} ;
+h1:before {} ; h1:after {} ;</code>
+  * @media allows different styles for different media. Media examples include screen, print, handheld, projection, tty, tv, aural, braille. <code html> @media screen,print { p {color:blue} }</code>
+  * Misc Properties <code html>
+opacity:0.4; (for firefox)
+filter:alpha(opacity=40) (for IE)
+onmouseover="this.style.opacity=1;
+  this.filters.alpha.opacity=100"
+onmouseout="this.style.opacity=0.4;
+  this.filters.alpha.opacity=40"
+cursor:deflt/cursor/pointer/move/wait/help/text/crosshair</code>