CSS > > > > my favorites

In a text document named yourstylesheetname.css (you just save it with the extension .css) you can define the styles for all of your webpage elements. It makes your html documents lighter, easier to work with (because you are not repeating the same definition for the font or table styles as you would be doing before). With Cascading Style Sheets (CSS) you can also achive many effects, which are not achievable (or are difficult to achieve) using just plain html, such as controlling your line-height, letter height, border width (you can use a very slim border around your table with CSS!), etc.
You can start with creating a simple yourstylesheetname.css, and then make a refer to it in the head of your html document, like this:
<link rel="stylesheet" type="text/css" href="yourstylesheetname.css" title="styles">

On this page I keep some of the css lines that are very helpful in my handcoding. All lines in this darkblue color are the lines of the code that you actually can paste into your yourstylesheetname.css.

BODY {font: 12px Verdana, Arial, Helvetica, Sans-Serif; color: #303080; line-height: 16px}
This line in your yourstylesheetname.css obviously describes the text style for the whole BODY of your document.

P {font: 12px Tahoma, Verdana, Arial, Sans-Serif; color: #006633; line-height:20px; text-align: justify}
In the BODY of your document, if you use this tag from now on
<p>This is how the text in the paragraph tag will look like!</p>

This is how the text in the paragraph tag will look like!



Try these styles if you need them:
DIV {font: 12px Verdana, Helvetica, Arial, Sans-Serif; color: #404040; line-height:16px;}
H1 {font: 14px Tahoma, Verdana, Arial, Sans-Serif; color: #e19507; line-height: 18px; font-weight: bold}


And this is how you can create a Header surrounded with Really thin lines above and below:
H2 {font: 17px Arial, Verdana, Helvetica, Sans-Serif; color: #bb0000; font-weight: bold; border-top: 1px solid #bb0000 ; border-bottom: 1px solid #bb0000; background-color:#dddddd; padding-left: 44px; padding-top:7; padding-bottom:7}
Now, have a look how this tag looks like: <h2>Beautiful Header</h2>

Beautiful Header


Some other useful samples of the CSS — try them in your html document!
.di {font: 14px Tahoma, Verdana, Arial, Sans-Serif; color: #bb0000; line-height:37px; text-align: center; font-weight: bold}
.textcenter {font: 14px Tahoma, Verdana, Arial, Sans-Serif; color: #028595; line-height:20px; text-align: center; font-weight: bold}

.ot {font: 14px Tahoma, Verdana, Arial, Sans-Serif; color: #592265; line-height:20px; text-align: justify; padding-left: 44px}

And the above tag will give you the left indent for all of the font belonging to this style. No more endless &nbsp; before the word!

And this one is for amazing tables with thin, thin, thin borders:
.tableDEL {border-collapse:collapse;}
.tableDEL tr td {border: solid 1px #ffffff; padding: 4; margin: 0}

Insert the following word referring to your yourstylesheetname.css into your table tag:
<table class="tableDEL" cellspacing=0 cellpadding=0 border=0> . .

.. and this is how a magical table defined above will look like (..and, try to guess which ones from the stylesheet's tags above I used for text!):
Title1
Title2
Title3
Title4
Graphic Design
Mulitimedia
Web
Photography
solution
cutting-edge
coding
still


Notice — those white thin lines are actually the borders defined in the css document.

Spice up those bullets now:
li {color: #bb0000}
  • more
  • and more
  • tips
    to come soon!