CSS stylesheet template – including HTML5 reset, tweaks for mobile including media queries, print reset styles, and base styles for standardization
/* Document : $ {
name
}
Created on : $ {
date
}
, $ {
time
}
Author : $ {
user
}
Description: Purpose of the stylesheet follows.*/ /* html5doctor.com Reset Stylesheetv1.6.1Last Updated: 2010-09-17Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark*/html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
border: 0;
font-size: 100%;
vertical-align: baseline;
margin: 0;
padding: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: none;
}
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: 700;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
input, select {
vertical-align: middle;
}
/* Minimal base stylesMore Info: https://github.com/paulirish/html5-boilerplate/blob/362d0b7/css/style.css*/html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
overflow-y: scroll;
}
a:link {
-webkit-tap-highlight-color: #FF5E99;
}
a:hover, a:active {
outline: none;
}
a, a:active, a:visited {
color: #607890;
}
a:hover {
color: #036;
}
ul, ol {
margin-left: 2em;
}
ol {
list-style-type: decimal;
}
nav ul, nav li {
list-style: none;
list-style-image: none;
margin: 0;
}
small {
font-size: 85%;
}
b, strong, th {
font-weight: 700;
}
td {
vertical-align: top;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
}
sup {
top: -.5em;
}
sub {
bottom: -.25em;
}
pre {
padding: 15px;
white-space: pre-wrap;
word-wrap: break-word;
}
.ie6 legend, .ie7 legend {
margin-left: -7px;
}
button, input, select, textarea {
font-family: sans-serif;
font-size: 100%;
margin: 0;
overflow: visible;
vertical-align: baseline;
width: auto;
}
textarea {
overflow: auto;
vertical-align: text-top;
}
label, input[type=button], input[type=submit], input[type=image], button {
cursor: pointer;
}
input::-moz-focus-inner, button::-moz-focus-inner {
border: 0;
padding: 0;
}
input:invalid, textarea:invalid {
-moz-box-shadow: 0 0 5px red;
-webkit-box-shadow: 0 0 5px red;
border-radius: 1px;
box-shadow: 0 0 5px red;
}
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid {
background-color: #f0dddd;
}
.ie7 img {
-ms-interpolation-mode: bicubic;
}
/* ------------------------- Backgrounds *//*body {
background: url("../images/im_bg.gif") left top repeat;
}
*/ /* ------------------------- Generic */body {
/*color: #ffffff;
*/
}
.clear {
clear: both;
}
img {
/* Needed for mobile */ display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
/* ------------------------- Typography */strong {
font-weight: bold;
}
p {
}
h1 {
}
h2 {
}
h3 {
}
h4 {
}
h5 {
}
h6 {
}
address {
}
pre, code {
font-family: monospace;
}
/* Links */a, a:visited, a:active {
}
a:hover {
}
/* ------------------------- Forms */input {
}
select {
}
label {
}
/* ------------------------- Lists */ /* ------------------------- Layout */ /* ------------------------- Popups */ /* ------------------------- Media Queries */ /* ---------------------------------------------------------------------------- *//* MEDIA QUERIES -------------------------------------------------------------- *//* ---------------------------------------------------------------------------- */ /** * Print styles. * * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ */@media print {
* {
background: transparent !important;
color: black !important;
text-shadow: none !important;
filter: none !important;
-ms-filter: none !important;
}
/* Black prints faster: sanbeiji.com/archives/953 */ a, a:visited {
color: #444 !important;
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
content: "";
}
/* Don't show links for images, or javascript/internal links */ pre, blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
/* css-discuss.incutio.com/wiki/Printing_Tables */ tr, img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3 {
page-break-after: avoid;
}
}
/* Smartphones (portrait) ----------- */@media only screen and (max-width : 320px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */@media only screen and (min-width : 321px)and (max-width : 480px) {
/* Styles */
}
/* iPads (portrait) ----------- */@media only screen and (min-width : 481px)and (max-width : 768px) {
/* Styles */
}
/* iPads (landscape) ----------- */@media only screen and (min-width : 769px) and (max-width : 1024px) {
/* Styles */
}
/* Larger screens ----------- */@media only screen and (min-width : 1024px) {
/* Styles */
}