CSS Type properties cheat sheet

Posted on:

August 31st, 2009

This post is going to be going over all the Type CSS Properties and giving you the properties of each item. Since I like Adobe Dreamweaver’s GUI so much I will use a screen shot of it as a reference because it provides a clean and compact way of organizing the properties.


image

CSS Font Families

   1:  font-family: Verdana, Geneva, sans-serif;
   2:  font-family: Georgia, "Times New Roman", Times, serif;
   3:  font-family: "Courier New", Courier, monospace;
   4:  font-family: Arial, Helvetica, sans-serif;
   5:  font-family: Tahoma, Geneva, sans-serif;
   6:  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   7:  font-family: "Arial Black", Gadget, sans-serif;
   8:  font-family: "Times New Roman", Times, serif;
   9:  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  10:  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  11:  font-family: "MS Serif", "New York", serif;
  12:  font-family: "Lucida Console", Monaco, monospace;
  13:  font-family: "Comic Sans MS", cursive;

CSS Font Size:

   1:  font-size: 12px;
   2:  font-size: 12em;

CSS Font Weight

   1:  font-weight: normal;
   2:  font-weight: bold;
   3:  font-weight: bolder;
   4:  font-weight: lighter;

CSS Font Style

   1:  font-style: normal;
   2:  font-style: italic;
   3:  font-style: oblique;
   1:  font-variant: normal;
   2:  font-variant: small-caps;

CSS Line Height

   1:  line-height: normal;
   2:  line-height: 12px;
   3:  line-height: 12em;

CSS Text Transform

   1:  text-transform: capitalize;
   2:  text-transform: uppercase;
   3:  text-transform: lowercase;
   4:  text-transform: none;

CSS Text Decoration

   1:  text-decoration: underline; 
   2:  text-decoration: overline;
   3:  text-decoration: line-through;
   4:  text-decoration: blink;
   5:  text-decoration: none;

CSS Text Color

   1:  color: #000; /* Black */
   2:  color: #FFF; /* White */

CSS Example for <p>

   1:  p
   2:  {
   3:      color: #000; /* White */
   4:      font-family: "Arial Black", "Gadget", "sans-serif";
   5:      font-size: 12px;
   6:      font-style: normal;
   7:      line-height: normal;
   8:      font-weight: normal;
   9:      font-variant: normal;    
  10:  }

This entry was posted on Monday, August 31st, 2009 at 7:09 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply