Question

I have a simple site with several html pages. I use only standard html tags like table (tr, td, th), p, form (input), center, a, img. But by default controls look boring.

I would like to make it more cool with minimum effort. I have already thought about some external CSS to include on my page (or completely copy) – but didn’t find any from-the-box solution.

I would like to get some suggestions/solutions to make my site looks better without massive modifications on it.

Thank you for any help!

Answer 1

you can try simple background-color , box-shadow, border-radius , css3 gradients and other css3 styles to your th and td elements and also to your p elements ;

for Eg:

table{font-size:11px;margin:auto; color:#fff; border:1px solid #666; background:#4b4b4b url('../images/low_contrast_linen.png') !important; box-shadow:0px 0px 8px 1px #1e1e1e; border-radius:3px; padding:0px;}

table tr:hover{background-color:#666;}

table td{border-top:1px solid #666; padding:10px 5px;}

table th{background-image:-moz-linear-gradient(90deg,#127286, #1a9eba) !important; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#1a9eba', EndColorStr='#127286') !important; background: -webkit-gradient(linear, left top, left bottom, from(#1a9eba), to(#127286)) !important; box-shadow:0 2px 8px #444444; color:#fff; text-shadow:none; background-color:#017AC5;font-weight:normal; padding:8px; font-size:12px; border-right:1px solid #1A9EBA;}

this adds nice effects to your table throughout the site with out much effort..
P.S try a nice linen style background image for the table it will look awesome.

The same applies to the other tags.