{"id":946,"date":"2015-01-30T07:28:27","date_gmt":"2015-01-30T13:28:27","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=946"},"modified":"2015-01-30T07:28:27","modified_gmt":"2015-01-30T13:28:27","slug":"css-typographic-reset-step-by-step","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/css-typographic-reset-step-by-step\/","title":{"rendered":"CSS Typographic Reset: Step By Step"},"content":{"rendered":"

A CSS reset<\/a> 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<\/a> to all tables, you would set a very basic set of rules for that table. For example:<\/p>\n

\ntable {\nbackground: #888;\n}\n<\/pre>\n
That would make all your future tables have a grey background, unless you specified otherwise based on class or ID. <\/p>\n
So if you are creating a new WordPress theme<\/a>, 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:<\/p>\n
Theme First Rules Including Typography<\/h2>\n
\nbody { color: #000;  background: #fff; font-family: Georgia, \"Times New Roman\", Times, serif; }\n\na { color: #0074BD; font-size: 14px; text-decoration: none; font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace; }\n\na:hover { color: #000; }\n\nh1, h2, h3, h4, h5, h6 { font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; }\n\nul li {    list-style-type: disc;  list-style-image: none; font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; }\n\ntable { background: #999; padding: 20px; font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif; }\n<\/pre>\n
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:<\/p>\n
All font that is not specified will be controlled by the body font-family selection<\/strong><\/p>\n
Because I did not specify “div” rules, If I just type some text into a div, it will output with the following: <\/p>\n
\ncolor: #000;\nfont-family: Georgia, \"Times New Roman\", Times, serif;\n<\/pre>\n
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:<\/p>\n
This is a div element with a link<\/a> and a header section with a list:<\/p>\n
Heading<\/h2>\n