12 Mar, 2009

Typography.css

Categoriën: Typography |crossbrowser |tekst

Best wel handig om alle tekst gerelateerde CSS bepalingen in één apart bestand te steken, best in combinatie met één of andere reset.css waar het web tegenwoordig van overloopt.

CSS

/* --------------------------------------------------------------
   Reset
-------------------------------------------------------------- */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, acronym, address, code, del,
dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
body {
line-height: 1.5;
background: #fff;
margin: 1.5em 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight:400;
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
a img {
border: none;
}
input,textarea {
margin: 0;
}
/* Removes Firefox imposed outline */
a { outline: none; }
/* Clearing floats without extra markup  */
.wrapper {
display: inline-block;
}
.wrapper:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .wrapper { height: 1%; }
.wrapper { display: block; }
/* --------------------------------------------------------------
   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: Helvetica, Arial, sans-serif;
}
/* Headings
-------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 { font-weight: bold; }
h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; margin-bottom: 1.5em; }
h6 { font-size: 1em; }
/* Text elements
-------------------------------------------------------------- */
p { margin: 0 0 1.5em; }
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; }
a { color: #009; text-decoration: none; }
a:hover { text-decoration: underline; }
blockquote { margin: 1.5em; }
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; }

Gerelateerde Snippets

Geen reakties op "Typography.css"

Reaktie formulier


Advertenties

Volgende nieuwe Snippet:

  • Momenteel niks gepland.