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 = 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; }
Resources
CSS Rounded Button Maker
CSS3 Generator
CSS3 Help Cheat Sheet
CSS Tricks Downloads