boilerplate typography css framework in CSS
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

/* -------------------------------------------------------------- 

   Boilerplate typography.css
   * Sets up some sensible default typography.

-------------------------------------------------------------- */

/* This is where you set your desired font size. The line-heights
   and vertical margins are automatically calculated from this.
   The percentage is of 16px (0.75 * 16px = 12px). */
body { font-size: 75%; } 

/* Default fonts and colors. */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea { font-family: "Trebuchet MS", Helvetica, Tahoma, Arial, sans-serif; }

/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { font-weight: bold; }

h1 { font-size: 2.5em; line-height: 1; margin-bottom: 0.5em; padding-left:10px;}
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin: 1em 0em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 0.5em; }
h5 { font-size: 1em; margin-bottom: 1.5em; }
h6 { font-size: 1em; }

/* Text elements
-------------------------------------------------------------- */

p { margin: 0 0 0.5em; line-height:1.7em; } /* changed by Max */
/* p:first-letter {  display: block;  float: left;  margin: 5px 5px 0 0;  font-size: 1.4em; }   cancelled by Max */

ul, ol { margin: 0 1.5em 1.5em 1.5em; }
ul { list-style-type: circle; }
ol { list-style-type: decimal; }

dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dl dd { margin-left: 1.5em; }

abbr, acronym { border-bottom: 1px dotted #000; }
address { margin-top: 1.5em; font-style: italic; }
del { color: #000; }

blockquote { padding:1em 1em 1em 1.5em; font-family:baskerville,"palatino linotype",serif; }
blockquote > *:first-child:before { content:"\201C"; font-size:3.5em; margin-left:-.62em; font-family:georgia,serif; padding-right:.2em; color:#aaa; line-height:0; }/* From Tripoli  */
strong { font-weight: bold; }
em, dfn { font-style: italic; }
dfn { font-weight: bold; }
pre, code { margin: 1.5em 0; white-space: pre; }
pre, code, tt { font: 1em monospace; line-height: 1.5; }
tt { display: block; margin: 1.5em 0; line-height: 1.5; }
hr { margin-bottom:1.5em; }

/* Tables
-------------------------------------------------------------- */

table { margin-bottom: 1.4em; }
th { border-bottom: 2px solid #ddd; font-weight: bold; }
td { border-bottom: 1px solid #ddd; }
th,td { padding: 4px 10px 4px 10px; }
tfoot { font-style: italic; }
caption { background: #ffc; padding:5px; }

You may want to check :

  1. simple slide panel
  2. global css general set of rules
  3. RMS css forms framework
  4. Hartija css print framework
  5. Formy CSS forms framework

One Comment

  1. Posted 26/07/2010 at 3:19 PM | Permalink

    Genial post and this fill someone in on helped me alot in my college assignement. Say thank you you as your information.

Post a Comment

Your email is never shared. Required fields are marked *

*
*