/********************************************************************************************** RESET.CSS by nickelleon A collection of various CSS techniques merged into a custom suite. Provides a starting point for a consistent CSS experience between multiple browsers. Also included is a collection of design notes that may help make CSS decisions easier. Thanks goes to: Yahoo Developer Network (http://developer.yahoo.com/yui/license.html) Erec Meyer (http://meyerweb.com/eric/tools/css/reset/) Ed Eliot (http://www.ejeliot.com/blog/63) ems and ens em: -- The em dash is used for emphasis. Since it breaks up the flow of the sentence, only use the em dash to stress a point. Use the em dash in place of the comma, semicolon, colon, and parentheses. There are no spaces on either side of the em dash. The em dash is overused and should be used sparingly to create an effect. * Strongest emphasis: use em dashes. * Equal emphasis: use commas. * Reduced emphasis: use parentheses. en: - The en dash is used in place of the word "to." When a range of numbers is preceded with the words "from" or "between," don't use the en dash. * Example: "You look like you are between 22-26" (INCORRECT) "You look like you are 22-26" (CORRECT) font size * You can use absolute or relative sizes. Relative sizes are in relation to the parent element (e.g. ). The only length you may use without any units is 0. Relative: * Ems: 4em * X height: 1ex * Percentages: 120% Absolute: * Pixels: 12px * Inches: 0.5in * Cm: 2.5cm, Mm: 25mm * Points: 10pt (72pt = 1in) * Picas: 2pc (1pc = 12pt) * Don't use pixels for font sizes, because you don't know the resolution of the screen that anyone is using. For instance, font-size: 12px will give you * 12 point on a 72dpi screen * 9 point on a 96dpi screen * 6.9 point on a 125dpi screen Similarly, avoid using point sizes as well: * Many machines are not properly set up (the operating system doesn't know the screen resolution) * Many people can't see text below a certain size, and so increase the base font-size Respect these people: try to use relative font sizes. Use font-size: 100% for paragraph text, font-size: 120% or so for headings, font-size: 80% for copyright statements, etc. Larger font size indicate higher priority because it draws reader’s attention, therefore this method is commonly applied on headings. On the other hand, you can de-emphasize by using smaller font size. font family * You should always end your font family with a generic family. Generic fonts are: serif, sans-serif, monospace, cursive, fantasy font contrast Contrast can be achieved by mixing different typeface classifications. However, due to limited web safe fonts, there are only two main classifications commonly used: serif and sans-serif. Generally, to create a contrast between the headings and the body text, we use sans-serif font for the headings and serif font for the body, or vice versa. font color Color contrast is a common way to distinguish between navigation, headings, link, and body text. You can use faded color to indicate something that is disabled or not available. You can also use color to distinguish individual words within a group of text. Sometimes you don’t need to make something bigger to get more attention, you can create emphasis by using brighter color, such as red. When small font size is combined with lighter tone color, the importance of the text is further de-emphasized. font case When the same typeface is used for the headings and body text, contrast can be established by changing the case. Uppercase tends to get more attention than lowercase, therefore it is more suitable for headings. Avoid using uppercase in the body text or in long sentence because it will reduce readability. font style Using underline decoration to emphasize text is a big mistake in web typography. Readers will misinterpret the underlined text as a link because the browser underlines the link by default. So, do not underline any text that is not a link when posting on the web. font weight Giving certain text a heavier weight (bold) can also create emphasis. A higher weight on an entire line of text makes the emphasis/contrast of the text lost. font space Space plays the most important part in maintaining flow of your design. Good use of space will tell the reader where to start, when to pause, where it ends, and what to do next. * Block break (padding or margin) is the space in between the block elements. * Paragraph break (padding or margin) is the space created after the

element. * Tracking (letter-spacing) is the space in between the characters. * Leading (line-height) is the space in between the lines. * Indentation (padding or margin) is commonly used for blockquote and list elements. collapsing margins Two consecutive vertical margins collapse if there is no border or padding that fall between them. Targetting IE specific versions with CSS hacks: .box { background: #00f; // all browsers including Mac IE *background: #f00; // IE 7 and below _background: #f60; // IE 6 and below } **********************************************************************************************/ /*** strip the browser's default CSS ***/ html { color:#000; background:#FFF; } body { margin:0; padding:0; } div { margin:0; padding:0; } dl,dt,dd,ul,ol,li { margin:0; padding:0; } h1,h2,h3,h4,h5,h6 { margin:0; padding:0; } pre,code { margin:0; padding:0; } form,fieldset,legend,input,textarea { margin:0; padding:0; } p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } li { /* list-style:none; */ } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } blockquote,q { quotes: none; } blockquote:before,blockquote:after,q:before,q:after { content:''; content:none; } abbr,acronym { border:0; font-variant:normal; } sup { vertical-align:text-top; } sub { vertical-align:text-bottom; } input,textarea,select { font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%; } legend { color:#000; } ins,del { text-decoration:none; } body { font:13px/1.231 arial,helvetica,clean,sans-serif; *font-size:small; *font:x-small; line-height: 1.4; } select,input,button,textarea { font:99% arial,helvetica,clean,sans-serif; } table { font-size:inherit; font:100%; } pre,code,kbd,samp,tt { font-family:monospace; *font-size:108%; line-height:100%; } /*** provide a browser-independent starting point for CSS ***/ h1 { /*18px*/ font-size:138.5%; } h2 { /*16px*/ font-size:123.1%; } h3 { /*14px*/ font-size:108%; } h1,h2,h3 { /* top & bottom margin based on font size */ margin:1em 0; } h1,h2,h3,h4,h5,h6,strong { /*bringing boldness back to headers and the strong element*/ font-weight:bold; } abbr,acronym { /*indicating to users that more info is available */ border-bottom:1px dotted #000; cursor:help; } em { /*bringing italics back to the em element*/ font-style:italic; } del { text-decoration:line-through; } blockquote,ul,ol,dl { /*giving blockquotes and lists room to breath*/ margin:1em; } ol,ul,dl { /*bringing lists on to the page with breathing room */ margin-left:2em; } ol li { /*giving OL's LIs generated numbers*/ /* list-style:decimal outside; */ } ul li { /*giving UL's LIs generated disc markers*/ list-style:disc outside; } dl dd { /*giving DL's DDs breathing room*/ margin-left:1em; } th,td { /*borders and padding to make the table readable*/ border:1px solid #000; padding:.5em; } th { /*distinguishing table headers from data cells*/ font-weight:bold; text-align:center; } caption { /*coordinated margin to match cell's padding*/ margin-bottom:.5em; /*centered so it doesn't blend in to other content*/ text-align:center; } p,fieldset,table,pre { /*so things don't run into each other*/ margin-bottom:1em; } /* setting a consistent width, 160px; control of type=file still not possible */ input[type=text],input[type=password],textarea { width:12.25em; *width:11.9em; } /*** commonly used classes ***/ .imaged span { display: none; } .fleft { float: left; } .fright { float: right; } .clearer { clear: both; height: 0px; } .grow { font-size: 125%; } .center { text-align: center; margin: 0 auto; } .block { display: block; }