There are two new additions with this update. The first is a class to handle negative text indentation for image replacement items, attach this class to any item you want to hide from user view but still have in the page for search engines to read. The second addition is three classes to help you control your text transformations, it’s now easy to handle text that comes in at the wrong case.

I fixed a minor spelling issue with all the charcoal named elements. I’ve left the old spelling in place, if you’ve used this style on other sites you can feel free to update your Core CSS without fear of those older classes breaking. I also adjusted the colors of the standard input elements slightly, they should now be more readable.

As always; using this code requires you include Eric Meyer’s Reset CSS before Core CSS. This can be included either at the beginning of Core CSS or in a separate file which is called first.

Change log 1.2 > 1.2.1
1. + Added new Class txtImg. Used on image replacement items to remove the text from user display.
2. + Added three new Classes to handle Text Transforms: capitalize, uppercase, lowercase.
3. -/+ Fixed a minor spelling error: charcol becomes charcoal. Old spelling left for backwards compatibility.
4. -/+ Amended colors on standard input items to be more user friendly.

There are three ways for you to download the code.
1. Copy and paste the code listed below.

2. Download a file containing the full Core CSS.

3. Download a file containing a minified version of Core CSS.

/* core.css Paul West [http://www.yaypaul.com] */
/* Version: 1.2.1 - 2010-01-18 */

body{background:#fff;}

/* Block level */
div{overflow:hidden;}
.visible{overflow:visible;}
p.closed{margin:0;}
p.open{margin:35px 0 0 0;}
p.mini{margin:10px 0 0 0;}
.float{float:left !important;}
.floatRight{float:right !important;}
.relative{position:relative !important;}
.absolute{position:absolute !important;}
.fixed{position:fixed !important;}
.hidden{display:none}
.block{display:block}
.top{position:fixed; top:0; z-index:10;}
.txtImg{text-indent:-2000px;}

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

/* Page layout */
.width100{width:100% !important;}
.width75{width:75% !important;}
.width66{width:66% !important;}
.width50{width:50% !important;}
.width25{width:25% !important;}
.width33{width:33% !important;}
.width20{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;}
.capitalize{text-transform:capitalize;}
.uppercase{text-transform:uppercase;}
.lowercase{text-transform:lowercase;}
.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, .charcoal{color:#333;}
.darkestGrey{color:#484848;}
.darkGrey{color:#666;}
.midGrey{color:#888;}
.lightGrey{color:#ccc;}
.lightestGrey{color:#e5e5e5;}

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

/* 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{font-family:Arial, Helvetica, sans-serif; margin-right:10px; padding:4px; background-color:#e5e5e5; border:0;}
input:focus, select:focus, textarea:focus{background-color:#f5f5f5;}
input[type="radio"]{border:0 solid !important;}
input[type="checkbox"]{border:0 solid !important;}
input[type="submit"]{background-color:#e5e5e5;}
input[type="submit"]:hover{background-color:#75d0ff;}

The first thing I noticed that needed changing was the way the standard width classes were named; fullWidth and quarterWidth while intuitive just aren’t as intuitive as width100 and width25. Switching to percentages made way more sense.  I’ve listed a full change log below, but I think you’ll agree Core CSS has become that little bit easier to use.

As always; using this code requires you include Eric Meyer’s Reset CSS before Core CSS. This can be included either at the beginning of Core CSS or in a separate file which is called first – I prefer the first method.

Change log 1.0 > 1.2
1. – Removed standardized ‘P’ style (I found there were far less bugs if this was set per project).
2. + Added ‘P.mini’ class (complements P.open nicely).
3. + Added ‘fixed’ class (useful for quick positioning).
4. -/+ Revamped all width definitions to exactly match widths required (fullWidth becomes width100 etc).
5. + Added ‘lightestGrey’ class (useful for dark background small-print).
6. + Added ‘lightestGreyBg’ class (helpful for footer backgrounds etc).
7. + Added ’superLightGreyBg’ class (extension of lightestGreyBg, again for footers, box backgrounds etc).
8. -/+ Revamped ‘input’ styles to be more neutral (should now be a proper option, rather than just a reminder to change the styles).

There are three ways for you to download the code.
1. Copy and paste the code listed below.

2. Download a file containing the full Core CSS.

3. Download a file containing a minified version of Core CSS.

/* core.css Paul West [http://www.yaypaul.com] */
/* Version: 1.2 - 2009-08-22 */

body{background: #fff;}

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

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

/* Page layout */
.width100{width:100% !important;}
.width75{width:75% !important;}
.width66{width:66% !important;}
.width50{width:50% !important;}
.width25{width:25% !important;}
.width33{width:33% !important;}
.width20{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:#888;}
.lightGrey{color:#ccc;}
.lightestGrey{color:#e5e5e5;}

/* 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;}
.lightestGreyBg{background-color:#e5e5e5;}
.superLightGreyBg{background-color:#f5f5f5;}

/* 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{font-family:Arial, Helvetica, sans-serif; margin-right:10px; padding:4px; background-color:#dbdbdb; border:0;}
input:focus, select:focus, textarea:focus{background-color:#f5f5f5;}
input[type="radio"]{border:0 solid !important;}
input[type="checkbox"]{border:0 solid !important;}
input[type="submit"]{background-color:#888;}
input[type="submit"]:hover{background-color:#4aa056;}

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;}