CSS Typographic Reset: Step By Step

Published January 30, 2015 by CSS Newbies.

A CSS reset is a short set of rules that resets the styling of all the basic HTML elements. In the same way that you set basic CSS rules, applying a reset will give you a baseline set of variables for everything you create. For example, if you were using CSS to apply a background to all tables, you would set a very basic set of rules for that table. For example:

table {
background: #888;
}

That would make all your future tables have a grey background, unless you specified otherwise based on class or ID.

So if you are creating a new WordPress theme, or a custom coded site, you’ll want to set some baseline parameters first. Most notably, typography. So let’s say I want to set some basic rules to start off my theme:

Theme First Rules Including Typography

body { color: #000;  background: #fff; font-family: Georgia, "Times New Roman", Times, serif; }

a { color: #0074BD; font-size: 14px; text-decoration: none; font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace; }

a:hover { color: #000; }

h1, h2, h3, h4, h5, h6 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }

ul li {    list-style-type: disc;  list-style-image: none; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }

table { background: #999; padding: 20px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }

Now this may look like some simple CSS rules, but if you don’t understand the affect on font typography, it may cause some serious frustration. Let’s breakdown the above:

All font that is not specified will be controlled by the body font-family selection

Because I did not specify “div” rules, If I just type some text into a div, it will output with the following:

color: #000;
font-family: Georgia, "Times New Roman", Times, serif;

However, if I add a link or an heading tag, those have different font selections. So based on the specified rules above, let’s see what I get with some HTML:

This is a div element with a link and a header section with a list:

Heading

  • My list #1
  • My list #2

So you can see that the different rules apply themselves in the layers in which I defined them. There are some great pre-made reset packages over at CSS Reset.

  1. Pingback: Creating Simple and Interactive Pricing Tables in CSS | Lunarium Design

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>