The toolbox CSS has nothing to do with any website, it is a collection of styles that are utilized commonly on any web project by authors. It is styling information. Most of the times students are asked to write for clearing a float. Toolbox CSS includes a different style sheet for different utility styles.

What is not Toolbox CSS?
Toolbox CSS is never a CSS reset. Toolbox CSS is not even a CSS framework. It contains none of the style “spirit” that uniquely makes a web project unique.

Using a Toolbox CSS
Why not utilizing a toolbox CSS. It will save web authors and developer’s time and effort. It saves on time from writing the same styles all over again. If you need to float something from the left, you can depend on a toolbox. It helps IT professionals to keep consistency over sites. Using toolbox all the time, makes the user share the same common class names, and it will be easier for them to understand and review.

THE CODE
Below is the decoding of the TOOLBOX CSS:

The Code
The code for the Toolbox CSS is below. /*

LAYOUT TOOLS
*/
.floatLeft { float: left; }
.floatRight { float: right; }
.clear { clear: both; }
.layoutCenter { margin: 0 auto; }
.textCenter { text-align: center; }
.textRight { text-align: right; }
.textLeft { text-align: left; }
/*
PRINT TOOLS
*/
.page-break { page-break-before: always; }
/*
TYPOGRAPHIC TOOLS
*/
.error { border: 1px solid #fb4343; padding: 3px; color: #fb4343; }
.warning { border: 1px solid #d4ac0a; padding: 3px; color: #d4ac0a; }
.success { border: 1px solid #149b0d; padding: 3px; color: #149b0d; }
.callOut { font-size: 125%; font-weight: bold; }
.strikeOut { text-decoration: line-through; }
.underline { text-decoration: underline; }
.resetTypeStyle { font-weight: normal; font-style: normal; font-size: 100%;
text-decoration: none; background-color: none; word-spacing: normal;
letter-spacing: 0px; text-transform: none; text-indent: 0px; }
/*
STYLING EXTRAS
*/
a[href^="mailto"] { background: url(images/emailIcon.png) left center no-repeat; padding-left: 10px; } { background: url(images/pdfIcon.png) left center no-repeat; padding-left: 10px; } a[href~=".pdf] a.button { color: black; border: 1px solid black; padding: 3px; }
a.button:hover { background: black; color: white; }
.transpBlack { background: url(images/transpBlack.png); }
/*
DISPLAY VALUES
*/
.hide { display: none; }
.show { display: block; }
.invisible { visibility: hidden; }

SOME MORE EXPLANATION

The PAGE BREAK; Insert the “page break” class, a new page will start when printing the website to a machine printer. It is helpful if you are working on major sections and large images.

Styling Extras are referenced to some image files that are not included here. You can try Icon finder, there you can find nice icons.

Display Values. The difference between visibility and none visibility are hidden, seeing the display value to none, it removes the layout box from the present page, it causes flow. It is sometimes likable but sometimes not. You may use the visibility attribute, by simply hiding an element, make it sure that you leave the space that it occupied intact.

Tags: What is Tool Box CSS?