@charset "utf-8"; @import url(http://fonts.googleapis.com/css?family=Alex+Brush); /* @statements must be the first things in a css file @charset should come before @import (if both are specified) */ /* ================================================== THINGS THAT I WOULD PUT IN PRETTY MUCH ANY CSS FILE ================================================== */ /* url() doesn't require " or ' but spaces have to be escaped if not quoted (why would you have spaces?) note that url() is relative to the css (not the document) so if the page is index.html and the css is include/style.css and a background is images/background.jpg then the css would be background:url("../images/background.jpg") or background:url("/images/background.jpg") or possibly background:url("http://host.domain.tld/images/background.jpg") */ /* that does bring to light another thing I just started realizing I used to always do sitename.html/sitename.css as a default naming convention (instead of index.html/style.css) I eventually started doing the latter and am now it's becoming difficult to tell different sites' files apart */ /* css3's support is widely varied between browsers a good site for see what is supported and to what extent (http://www.w3schools.com/cssref/css3_browsersupport.asp) also note that css3 is largely unsupported by the w3 css validator (http://jigsaw.w3.org/css-validator/) so expect plenty of errors as you start diving into it */ /* there are multiple measurement units (em, %, px, pt, etc...) em is popularly used for fonts and px is normal for images (although % is becoming more common for adjustable-width pages) px would seem the most logical unit for fonts but it doesn't allow users to increase/decrease the font size in some browsers (most browsers prefer zooming the whole page as opposed to the text so it's less of an issue) em and % work similarly (both are relative measurements) but they increase/decrease a little differently (my understanding is that % doesn't jump sizes as dramatically as em) 1em is equal in width to the size of how the browser would render 1 capital M (usually 16px but Opera Mobile uses 12px instead of 16px as its default size) let's say we're wanting a 12px font for a smaller-sized text (remember that em is based on the size of its parent font size) if the parent is 1em then 12px would be 0.75em (16 / 12 = 0.75) but if the parent is 1.15em then 0.75em doesn't work (16 x 1.15 / 12 = 0.65) a similar thing happens with "small" let's say we have some text that we just want to display smaller than the rest we set font-size:0.75 for that text but if there is semantically "small" text within that then we have to set small {font-size:1em} or it will be smaller than the already small text boy cascading and proportional fonts is fun there is a new unit of "rem" though it is relative to the root element (html) size */ /* font-size:100% fixes some font resizing problems (not sure what they are but it's recommended) text-size-adjust (not an official css component) keeps the iphone from making the text bigger when it goes to landscape overflow-y:scroll always shows the vertical scrollbar (keeps short pages from moving to the right by 20px-ish) */ html { font-size:100%; overflow-y:scroll; } /* supposedly helps keep text the same size when switching from portrait to landscape it's been found that none makes webkit-based desktop browsers not zoom so replace none with 100% most browsers don't understand 100% so keep none as a fallback */ body { -webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; -ms-text-size-adjust:100%; } /* browsers will automatically render elements they dont know (like these html5 ones) as inline so we tell the browser to render them as block this is mostly for IE8 and earlier if you're going to use html5 elements you should also use html5shiv (http://code.google.com/p/html5shiv/) or something similar */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } /* it helps screen readers to use for abbreviations in html it's fashionable to let the visual user know that it's an abbreviation and that they can mouse over it to see what it stands for use border-bottom instead of text-decoration (you can't dot an underline) */ /*abbr { text-transform: uppercase; }*/ abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } /* "a" will already have an underline so we don't want to underline it a second time with abbr */ a abbr[title], a dfn[title] { border:none; } /* doesn't validate */ /* iframe normally has a border (uggg) but html5 gave iframe a borderless option irritatingly enough internet explorer 8 will put the border in regardless of this css declaration */ img, iframe { border:none; max-width:100%; } /* internet explorer scales images very badly */ img { -ms-interpolation-mode:bicubic; } /* css selectors (like [href=""]) are good as they keep you from having class-itis */ /* put a little icon to the right of an external link (or link that opens in another window, in this case) */ /*a[href^="http:"],*/ a[target="_blank"] { background:url(Icon_External_Link.png) right center no-repeat; padding-right:13px; } .navigation a[target="_blank"] { background:none; padding-right:0; } /* I can't think of many times that you actually want a border around a first list item but I can think of many times that you don't (you can always comment this out) */ /*li:first-of-type { border: none !important; }*/ /*