/ Published in: CSS
Starter barebones stylesheet that fixes many common browser differences and styles all common HTML elements. - Will be updated.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/* Reset ------------------------------------------------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; background:transparent; } ol, ul {list-style: none;} table {border-collapse: collapse;border-spacing: 0;}/* tables still need 'cellspacing="0"' in the markup */ table[align="left"] {clear:both;float:none;}/*tables with align="left" apply float, this fixes it */ a:active, a:focus {outline:none;}/* removes link dotted line */ *:focus {outline:none;} /*remove webkit focus outline - comment out to apply*/ blockquote:before, blockquote:after, q:before, q:after {content: "";} blockquote, q {quotes: "" "";} blockquote {margin:30px 20px;color:#666;font-style:italic;} button:hover, input[type="reset"]:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="file"]:hover {cursor:pointer;} a img, img, fieldset {border: 0;} /* Typography -------------------------------------------------------------------------------------------------- */ em,dfn {font-style: italic;} dfn, label, legend, strong, dl dt {font-weight: bold;} dl, address {margin: 0 0 1.5em 0;} dd {margin-left: 1.5em;} sup, sub {line-height: 0;} sup { font-size:smaller; line-height:normal; vertical-align:super; } sub { font-size:smaller; line-height:normal; vertical-align:sub; } address {font-style: italic;} del {color:#666;} pre {margin: 1.5em 0; white-space: pre;} pre, code, tt {font: 13px "Courier New", "andale mono", "lucida console", monospace; line-height: 1.5;} ins {text-decoration: none;}/* remember to highlight inserts somehow! */ del {text-decoration: line-through;} thead th {background:none repeat scroll 0 0 #C3D9FF;} th, td, caption {padding:4px 10px 4px 5px;} th {font-weight:bold;} tfoot {font-style:italic;} abbr, acronym {border-bottom:1px dotted #666;cursor:help;} fieldset {padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc;} caption {text-align: left;background:#eee;} em {font-style:oblique;} a {color:#0033CC;text-decoration:underline;} a:focus, a:hover {color:#000;} body {font: 13px/1.5em 'Lucida Grande', "Helvetica", "Helvetica Neue", Arial, sans-serif;color:#222;} /* Headings ----------------------------------------------------------------------------------------------------*/ h1 {font-size: 25px;} h2 {font-size: 23px;} h3 {font-size: 21px;} h4 {font-size: 19px;} h5 {font-size: 17px;} h6 {font-size: 15px;} /* Spacing ----------------------------------------------------------------------------------------------------*/ ol {list-style: decimal;} ul {list-style: square;} li {margin-left: 30px;} p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset {margin-bottom: 20px;} hr { border:0px #ccc solid; border-top-width: 1px; clear: both; height: 0; } /* Classes ---------------------------------------------------------------------------------------------------- */ .left{float:left;display:inline;} .right {float:right;display:inline;} .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .clearfix:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; } .capital {text-transform:capitalize;} .uppercase {text-transform:uppercase;} .lowercase {text-transform:lowercase;} .caps { font-variant:small-caps; font-weight:bold; letter-spacing:1px; padding:0 2px; text-transform:lowercase; } .large { font-size:1.2em; } .small { font-size:0.8em; } /* Success, notice and error boxes -------------------------------------------------------------- */ .error,.notice,.success { padding:0.8em; margin-bottom: 1em; border: 2px solid #ddd; -moz-border-radius:6px; -webkit-border-radius:6px; -o-border-radius:6px; border-radius:6px; } .error {background: #FFCECE;color:#8a1f11;border-color:#DF8F8F;} .notice {background: #FFF6BF;color:#514721; border-color:#FFD324;} .success {background:#E6EFC2;color:#264409;border-color:#C6D880;} .error a {color: #8a1f11;} .notice a {color: #514721;} .success a {color: #264409;} /*Form Extra Styles ---------------------------------------------------------------------------- */ select {background:#fff;padding:4px;width:25%;} input[type="text"], input[type="password"], textarea { padding:6px; width:25%; background:#fff; background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#fff)); background: -moz-linear-gradient(top, #f9f9f9, #fff); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#ffffff'); -moz-box-shadow:0 1px 1px #ddd inset; -webkit-box-shadow:0 1px 1px #ddd inset; } input[type="text"], input[type="password"], select, textarea { -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px solid #D5D5D5; color:#333333; font-size:13px; } input[type="submit"], input[type="reset"], input[type="button"] {padding:2px 5px;} /* General ------------------------------------------------------------------------------------- */ #wrapper {width:960px;margin:20px auto;text-align:left;}
URL: http://www.vagrantradio.com/demos/barebones-css/