Visual Reference: CSS

Table of Contents

1. The Beginning
2. Learning HTML
3. Expanding Your HTML
4. Better by Design
5. "Color Me Happy!"
6. CSS Enterprise
7. Roll Over, CSS
8. Domain Registration and Hosting
9. Fire Up, FireFTP!  (Loading Files)
10. "Video Only," Please
11. Tools
12. Portfolio: Bringing It All Together
13. Visual Reference:
    1. HTML
    2. Images and Links
    3. HTML Template
    4. IE Specific CSS
    5. Meta Tags
    6. Special Characters
    7. HTML Lists
    8. CSS
    9. CSS Shorthand
    10. Colors

Syntax

Properties

Note: This is a work in progress and should not be considered "complete".

Type

• font-family:
  Arial, Helvetica, san-sarif;
  Times New Roman, Times, serif;
  Courier New, Courier, monospace;
  Georgia, Times New Roman, Times, serif;
  Verdana, Arial, Helvetica, sans-serif;
  Geneva, Arial, Helvetica, sans-serif;
  


• font-size:
  None;
  *value* (px, pt for points, in, cm, mm, pc for picas, em for ems, ex for exs, %);
  9;
  10;
  12;
  14;
  16;
  18;
  24;
  36;
  xx-small;
  x-small;
  small;
  medium;
  large;
  x-large;
  xx-large;
  smaller;
  larger;
  


• font-style:
  normal;
  italic;
  oblique;
  


• line-height:
  normal;
  *value* (px, pt for points, in, cm, mm, pc for picas, em for ems, ex for exs, %, no description— or blank, for multiple);
  


• font-weight:
  normal;
  bold;
  bolder;
  lighter;
  100;
  200;
  300;
  400;
  500;
  600;
  700;
  800;
  900;
  


• font-variant:
  normal;
  small-caps;
  


• text-transform:
  capitalize;
  uppercase;
  lowercase;
  none;
  


• text-decoration:
  underline;
  overline;
  line-through;
  blink;
  none;
  


• color:
  #(any hexidecimal);

Background

• background-color:
  #(any hexidecimal);


• background-image:
  url(followThisPath/image.jpg);


• background-repeat:
  repeat;
  repeat-x;
  repeat-y;
  no-repeat;
  


• background-attachment:
  scroll;
  fixed;
  


• (for horizontal positioning) background-position:
  left;
  center;
  right;
  *value* (px, pt for points, in, cm, mm, pc for picas, em for ems, ex for exs, %);
  


• (for vertical positioning) background-position:
  #px top;
  #px center;
  #px bottom;
  #px *value* (px, pt for points, in, cm, mm, pc for picas, em for ems, ex for exs, %);
  *(where value "#px" represents the horizontal value)

Block

• word-spacing:
  normal;
  *value* (pt, mm, cm, pc, in, px, em, ex);
  


• letter-spacing:
  normal;
  *value* (px, pt, in, cm, mm, pc, em, ex);
  


• vertical-align:
  baseline;
  sub;
  super;
  top;
  text-top;
  middle;
  bottom;
  text-bottom;
  *value* (%);
  


• text-align:
  left;
  right;
  center;
  justify;
  


• text-indent:
  *value* (px, pt, in, cm, mm, pc, em, ex, %);
  


• white-space
  normal;
  pre;
  nowrap;
  


• display:
  none;
  inline;
  block;
  list-item;
  run-in;
  inline-block;
  compact;
  marker;
  table;
  inline-table;
  table-row-group;
  table-header-group;
  table-footer-group;
  table-row;
  table-column-group;
  table-column;
  table-cell;
  table-caption;
  inherit;
  

Box

• width:
  auto;
  *value* (px, pt, in, cm, mm, pc, em, ex, %);
  


• height:
  auto;
  *value* (px, pt, in, cm, mm, pc, em, ex, %);
  


Note: "float" and "clear" are used together.
• float:
  left;
  right;
  none;
  


• clear:
  left;
  right;
  both;
  none;
  


• padding: ( padding:   padding-top:   padding-left:    padding-right:   padding-bottom: )
  *value* (px, pt, in, cm, mm, pc, em, ex, %);
  


• margin: ( margin:   margin-top:   margin-left:    margin-right:   margin-bottom: )
  *value* (px, pt, in, cm, mm, pc, em, ex, %);
  

Border

• border: ( border:   border-top:    border-left:   border-right:   border-bottom: )
  style (none, dotted, dashed, solid, double, groove, ridge, inset, outset);
  width (thin, medium, thick, *value*);
  color (#any hexidecimal);
  
     written as:
  box {
       border: dotted thin #00CCFF;
  }

List

• list-style-type:
  disc;
  circle;
  square;
  decimal;
  lower-roman;
  upper-roman;
  lower-alpha;
  upper-alpha;
  none;
  


• list-style-image:
  none;
  url (somesuchimage.jpg);
     written as:
  ul {
       list-style-image: url(mybullet.png);
  }
  


• list-style-position:
  inside;
  outside;
  

Positioning

• position:
  absolute;
  fixed;
  relative;
  static;
  


• width:
  auto;
  *value* (px, pt, in, cm, mm, pc, em, ex, %);
  


• height:
  auto;
  *value* (px, pt, in, cm, mm, pc, em, ex, %);
  


• visibility:
  inherit;
  visible;
  hidden;
  


• z-index: ( can also be "layer:" )
  auto;
  *value* (1, 2, 3, 4, 5, etc.);
  


• overflow:
  visible;
  hidden;
  scroll;
  auto;
  


• position ( top:   left:   right:   bottom: )
  auto;
  *value* (px, pt, in, cm, mm, pc, em, ex, %);
  

Extensions

• cursor:
  pointer;
  crosshair;
  text;
  wait;
  default;
  help;
  e-resize;
  ne-resize;
  n-resize;
  nw-resize;
  w-resize;
  sw-resize;
  s-resize;
  se-resize;
  auto;
  


• page-break-before:
  auto;
  always;
  left;
  right;
  


• page-break-after:
  auto;
  always;
  left;
  right;
  

---

VR-HTML Lists > VR-CSS > VR-CSS Shorthand