Example: Format an HTML table to look like a form:
<html> <head> <style type="text/css"> #WbsBody { background-color: #ADC3EF; } #WbsPanel { background-color: #EEF0F6; padding: 5px; margin: 15px; border: 1px solid #638AD6; } #WbsForm { padding: 2px; } #WbsForm span, #WbsForm td, #WbsForm input, #WbsForm select, #WbsForm textarea { font-family: Tahoma; font-size: 8pt; color: #000000; } #WbsForm input[type=text], select { height: 17px; border: 1px solid #7b9ebd; padding-left: 1px; cursor: default; width: 170px; } #WbsForm textarea { border: 1px solid #7b9ebd; padding-left: 1px; cursor: default; width: 350px; } #WbsForm div.description { border: 1px solid #7b9ebd; padding: 3px; width: 350px; } #WbsForm select { height: 21px; border: 1px solid #7b9ebd; padding-left: 1px; cursor: default; width: 174px; } #WbsForm td { padding-left: 10px; } #WbsForm tr { height: 20px; } #WbsForm td.required { font-weight: bold; color: #9F2409; } #WbsButtons input[type=submit], input[type=button] { font-size: 8pt; border: 1px solid #7B9EBD; background-color: #FAFAFC; width: 100px; margin-left: 3px; margin-right: 3px; margin-bottom: 3px; } #WbsButtons td { font-family: Tahoma; font-size: 8pt; color: #000000; } a.ReportLink { color: Blue; padding: 5px; } a.ReportLink:hover { color: crimson; padding: 5px; } table.formTitle { width: 100%; height: 32px; background-color: #63769B; border-bottom: solid 1px #485673; table-layout: fixed; } td.formTitle { text-align: left; color: #ffffff; font-family: Tahoma; font-size: 14px; font-weight: bold; text-indent: 10px; padding-right: 10px; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body id="WbsBody"> <table class="formTitle" cellpadding="1" cellspacing="0"> <tr> <td class="formTitle" nowrap="nowrap">WBS Form Demo</td> </tr> </table> <div id="WbsPanel"> <table id="WbsForm"> <tr> <td class="required">Record ID</td> <td><input type="text" value="123" /></td> </tr> <tr> <td>Colors</td> <td> <select id="ddlColors"> <option value="white" selected="selected">White</option> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select> </td> </tr> <tr> <td>Notes</td> <td><textarea cols="40" rows="4">Some notes here...</textarea></td> </tr> <tr> <td></td> <td><div class="description" />A long description goes here...</td> </tr> <tr> <td></td> <td> <a href="#" class="ReportLink">Download Report</a> </td> </tr> </table> <br /> <table id="WbsButtons" width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="left"> <input id="btnSubmit" type="submit" value="Submit" /> <input id="btnCancel" type="button" value="Cancel" /> </td> </tr> </table> </div> </body> </html>
Example: Format a DIV element to look like a text box:
<div style="border: 1px inset; padding: 3px;">Some text</div>
Example: Make an HR line dotted:
hr { color: #5EC054; border-style: dotted; width: 95% }
Example: Cut off text and add ellipsis:
<html> <head> <style type="text/css"> * { font-family: Verdana; } .box { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 300px; border: 1px dashed #333; padding: 10px; margin: 0 20px; } </style> </head> <body> <div class="box">Lorem ipsum dolor sit amet, per at vidisse detraxit constituam, brute dicat partiendo qui at. Et est eirmod corpora. Mea ea velit integre repudiare.</div> </body> </html>