Core CSS

Core CSS started life as a series of standardized custom CSS tags which I used within the various websites I create. With the creation of Reset CSS by Eric Meyer many of these tags became obsolete. Which set me thinking about a standard set of CSS tags all sites could use in conjunction with Reset CSS.

Core CSS is simply that: a set of tags which you use individually or together to define basic layout structures of web pages. Not to be confused with a framework or a ‘here I’ve done all the work’ CSS file, that’s not what this is.  You’ll still need to create a custom CSS file for each different sites you create, but using Core CSS means you wont have to recreate many of the tags and settings you and I use every day.

There are two ways for you to download the code.

1. Copy and paste the code listed below.

2. OR download a file containing Core CSS.

As with every project I’m sure I’ll find new things to add to the CSS file. And as with any project supplied to the public I’m sure you will find things you use missing or extras you’d like to add.  While you can add extra or missing items to your own files I’d like to encourage you to come and post back in the comments with your ideas and additions.  While I can’t promise I’ll add everything in, I will promise to review their relevance and usefulness to the community.

/*
core.css [screen]
- - - - - - - - - - - - - - - - - - - -
Creator:    Paul West [paulanthonywest.com]
Version:    1.0
Date:        2008-08-29
*/
body{background: #fff;}

/* Block level */
div{overflow:hidden;}
.visible{overflow:visible;}
p{margin:0 0 25px 0;}
p.closed{margin:0;}
p.open{margin:0 0 35px 0;}
.float{float:left !important;}
.floatRight{float:right !important;}
.relative{position:relative !important;}
.absolute{position:absolute !important;}
.hidden{display:none}
.block{display:block}
.top{position:fixed; top:0;}

/* Page frameworks */
.frameworkCenter{margin:0 auto;}
.frameworkLeft{left:0; top:0; position:absolute;}
.frameworkRight{right:0; top:0; position:absolute;}

/* Page layout */
.fullWidth{width:100% !important;}
.halfWidth{width:50% !important;}
.quarterWidth{width:25% !important;}
.thirdWidth{width:33% !important;}
.fifthWidth{width:20% !important;}

/* Clearing */
.clear{clear:both;}
.clearLeft{clear:left;}
.clearRight{clear:right;}

/* Content control */
.left{text-align:left !important;}
.right{text-align:right !important;}
.center{text-align:center !important;}
.justify{text-align:justify !important;}
.small{font-size:smaller;}
pre{background-color:#fff; border:#333 dashed 1px; padding:10px;}
blockquote{padding:20px; font-style:italic;}

/* Links */
a{text-decoration:underline;}
a:hover{text-decoration:none;}
a:visited{text-decoration:underline;}

/* Colours */
.white{color:#fff !important;}
.black{color:#000 !important;}
.chalk{color:#eee;}
.charcol{color:#333;}
.darkestGrey{color:#484848;}
.darkGrey{color:#666;}
.midGrey{color:#999;}
.lightGrey{color:#ccc;}

/* Background colours */
.whiteBg{background-color:#fff !important;}
.blackBg{background-color:#000 !important;}
.chalkBg{background-color:#eee;}
.charcolBg{background-color:#333;}
.darkestGreyBg{background-color:#484848;}
.darkGreyBg{background-color:#666;}
.midGreyBg{background-color:#999;}
.lightGreyBg{background-color:#ccc;}

/* Normalise Headings */
h1, h2, h3, h4, h5, h6{font-weight:normal;}

/* Table formating */
table td{padding:2px;}
td.first{padding:2px 2px 2px 4px;}

/* Input formating */
input, select, textarea{margin-right:10px; padding:4px; background-color:#eee; border:0;}
input:focus, select:focus, textarea:focus{background-color:#fff;}
input[type="radio"]{border:0 solid !important;}
input[type="checkbox"]{border:0 solid !important;}
input[type="submit"]:hover{background-color:#9cd7f1;}

Posted: Monday, December 8th, 2008
Tags: Core CSS, css, html, reset, standardized