terms and concepts
Name {attr1:value1;attr2:value2;attr3:value3;} /* comment */
.myText{}
h1{}
a:link{}
Learn css property by demo:
*{ margin:0; padding:0; border-width:0; }
pre-defined color table in CSS: http://www.w3schools.com/cssref/css_colornames.asp
.main-header-bar { background-color: transparent !important ; }
input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; } /* class "in" special change overide */ input[type="text"].in { background-color:red; } /* under id "col-4", class "in" special change override*/ .col-4 input[type="text"].in { width: 150px !important; } input[type="button"] { width:120px; margin-left:35px; display:block; }
Here is a interactive style play tool: http://www.somacon.com/p141.php
table, th, td { border: 1px solid black; } /* or */ table{ border-collapse:collapse; empty-cells:show; } td{ border-width: 1px; padding: 1px; border-style: inset; border-color: gray; }
ref: http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
table{ border-collapse:separate; empty-cells:show; }
<head> <?php include("e_header.htm"); ?> <?php include("e_javascript.htm"); ?> </head> <body> <div id="wrap"> <div id="header"> <?php include("e_menu.htm"); ?> </div> <div id="main"> </div> <div id="sidebar"> </div> <div id="footer"> <? include("e_footer.htm"); ?> </div> </div> </body>
<link rel=StyleSheet href="style.css" type="text/css" media=screen>
body, html { margin:0; padding:0; color:#000; background:#FFFFFF; } p{ font-size:14px; } /* layout */ #wrap { width:750px; margin:0 auto; background:#FFF; } #header { padding:50px 10px; color:#FFF; background:#FFF; background-image:url('image/banner.png') ; background-repeat:no-repeat; background-position:right; } #main { float:left; width:480px; padding:10px; background:#fff; } #sidebar { float:right; width:210px;/*230*/ padding:10px; background:#fff; border-width:2px; border-style:solid; } #footer { clear:both; padding:5px 10px; background:#ddd; } #footer p { margin:0; } * html #footer { height:1px; } /* element */ h1 { margin:0; } h2 { margin:0 0 1em; } #nav { padding:5px 10px; background:#ddd; } #nav ul { margin:0; padding:0; list-style:none; } #nav li { display:inline; margin:0; padding:0; } /*My Style*/ TD{font-family: Arial; font-size: 8pt;}
// gradient with half transparent way to half BG <p><span='colorHalfBG'>Text</span></p> span.colorHalfBG{ padding-left: 5px; padding-right: 5px; background: linear-gradient(0deg, rgba(241,90,34,1) 0%, rgba(241,90,34,1) 50%, rgba(241,90,34,0) 50%); }
.colorHalfBG:before { display: block; content:''; position:absolute; width:100%; bottom:0; left:0; background:#f66; z-index:-1; height:50%; }
Table Style