All In One

Here are few things I use a lot in HTML. Following are ready to use HTML and CSS elements which are ready to be used anywhere.

Clear Classes

.clear { clear:both; line-height:0; font-size:0; over-flow:hidden; }
.clear1 { clear:both; line-height:1px; height:1px;font-size:0; over-flow:hidden; }
.clear2 { clear:both; line-height:2px; height:2px;font-size:0; over-flow:hidden; }
.clear3 { clear:both; line-height:3px; height:3px;font-size:0; over-flow:hidden; }
.clear4 { clear:both; line-height:4px; height:4px;font-size:0; over-flow:hidden; }
.clear5 { clear:both; line-height:5px; height:5px;font-size:0; over-flow:hidden; }
.clear10 { clear:both; line-height:10px; height:10px;font-size:0; over-flow:hidden; }
.clear20 { clear:both; line-height:20px; height:20px;font-size:0; over-flow:hidden; }
.clear30 { clear:both; line-height:30px; height:30px;font-size:0; over-flow:hidden; }
.clear40 { clear:both; line-height:40px; height:40px;font-size:0; over-flow:hidden; }
.clear50 { clear:both; line-height:50px; height:50px;font-size:0; over-flow:hidden; }

Clear Usage

<div class="clear10"></div>

CSS Rounded Border

<div style="-webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; width:100px; height:100px; background:#000000;"></div>

CSS Border Preview

Message and Alert Box Styles

/*format boxes for body*/
blockquote { border-left: 2px solid #ddd; border-right: 2px solid #ddd; color: #666; padding:10px 20px; background-color:#F8F8F8;}
.sBox1 { color: #666; margin:20px 0; padding:10px; background-color:#F8F8F8;}
.sBox1 a, .sBox2 a, .sBox3 a { color: #000 !important;}
.sBox2 { color: #666; margin:20px 0; padding:10px; background-color:#F2F2F2;}
.sBox3 { color: #666; margin:20px 0; padding:10px; background-color:#eee;}
.sBox4 { color: #666; margin:20px 0; padding:10px; background-color:#E3F0F2; border:1px solid #ADDDE6;}
.sBox5 { color: #666; margin:20px 0; padding:10px; background-color:#E3F5FE; border:1px solid #BBE8FD;}
.invalid { background-color:#B90000; padding:10px; color:#fff;  margin:10px 0; }
.success { background-color:#00BB00; padding:10px; color:#fff;  margin:10px 0; }
.success2 { background-color:#C1FFC1; border:1px solid #6CFF6C; padding:10px; color:#000;  margin:10px 0; }
.promotions { background-color:#D9FFD9; border:1px solid #C4FFC4; padding:10px; color:#000;  margin:10px 0;line-height:1.6em; }
.tip1 { background-color:#FF8A00; padding:10px; color:#fff;  margin:10px 0; }
.tip2 { background-color:#FFFFE8; border:1px solid #FFCB8C; padding:10px; color:#000; font-size:.8em; margin:10px 0; }
.tip3 { background-color:#258FCD; padding:10px; color:#fff;  margin:10px 0; }
.tip4 { background-color:#FFFFEE; padding:10px; color:#111;  margin:10px 0; border:1px #EEEE00 solid; }
.alert { background:#FFFFA0 none repeat scroll 0 0; border:1px solid #E5E597; padding:.5em; margin:10px 0 10px 0; }

Box Classes Preview

blockquote

sBox1

sBox2

sBox3

sBox4

sBox5

Class = invalid

Class = success

Class = success2

Sample Heading
Class = promotions…. Sample text…

Class = tip1

Class = tip2

Class = tip3

Class = tip4

Class = alert

There are more styles. Download file below to view other great CSS and HTML styles.

Download WebStylePress Styles

Download WebStylePress Styles (size: 13KB)

CSS Template

Use the following CSS template and start with it before starting new HTML project to avoid most compatibility issues for different browsers.

/***** Global Settings *****/
 
html, body { border:0; margin:0; padding:0; }
body { font:100%/1.25 Arial, Helvetica, sans-serif; }
 
/***** Headings *****/
 
h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font-weight:normal; }
 
/***** Common Formatting *****/
 
img { border:0; }
p, ul, ol { margin:0; padding:0 0 1.25em 0; }
ul, ol { padding:0 0 1.25em 2.5em; }
blockquote { margin:1.25em; padding:1.25em 1.25em 0 1.25em; }
small { font-size:0.85em; }
sup { position:relative; bottom:0.3em; vertical-align:baseline; }
sub { position:relative; bottom:-0.2em; vertical-align:baseline; }
acronym, abbr { cursor:help; letter-spacing:1px; border-bottom:1px dashed; }
 
/***** Links *****/
 
a, a:link, a:visited, a:hover { text-decoration:underline; }
 
/***** Forms *****/
 
form { margin:0; padding:0; display:inline; }
input, select, textarea { font:1em Arial, Helvetica, sans-serif; }
textarea { width:100%; line-height:1.25; }
label { cursor:pointer; }
 
/***** Tables *****/
 
table { border:0; margin:0; padding:0; }
 
/***** Wrapper *****/
 
#wrap { width:1004px; margin:0 auto; }
 
/***** Global Classes *****/
 
.clear         { clear:both; }
.float-left    { float:left; }
.float-right   { float:right; }
 
.text-left     { text-align:left; }
.text-right    { text-align:right; }
.text-center   { text-align:center; }
.text-justify  { text-align:justify; }
 
.bold          { font-weight:bold; }
.italic        { font-style:italic; }
.underline     { border-bottom:1px solid; }
.highlight     { background:#ffc; }
 
.img-left      { float:left;margin:4px 10px 4px 0; }
.img-right     { float:right;margin:4px 0 4px 10px; }
 
.nopadding     { padding:0; }
.noindent      { margin-left:0;padding-left:0; }
.nobullet      { list-style:none;list-style-image:none; }
 
 
body { padding:0px; margin:0px; background-color:#FFFFFF; color:#000000; font-family:Tahoma; font-size:11px; font-weight:normal; } 
 
#fullwrap { width:100%; }
#container { width:1004px; }