Differences

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

--- notes:css_cheat_sheet [2026/07/22 21:28]
87.241.156.4 old revision restored (2026/06/03 02:21)
+++ notes:css_cheat_sheet [2026/07/24 19:48] (current)
14.176.159.225 old revision restored (2026/07/19 15:42)
@@ Line 43: / Line 43: @@
   * CSS uses C-style comments - /* comment */ .
-==== CSS Background/Text Properties ====
+==== CSS Properties ====
   * Background properties examples <code html>
 background-color: black;
@@ Line 53: / Line 53: @@
 </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>
-  * 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>

DokuWiki

Site Tools

Differences

Page Tools