CSS Tips I

Some CSS basic tips are described below. As usual, I will not dwell on the technical side of things, you have the rest of the WWW to help you if you become overly curious.

CSS Tip #1: How do I name the CSS classes I create?

Learning from my own past mistakes, these days I use the following formula when naming CSS classes:

code:
span.spanBold { font-weight:bold }
div.divCenter { text-align:center; vertical-align:center }
td.tdFooter { color:#FFFFFF; background-color:transparent }
table.tblMain { width:100%; padding:5px }

By repeating the selector names (i.e. p, span, td and div in the class name followed by a location or keyword description such as 'Main', 'Bold' or 'Footer', glancing through my CSS, I can easily figure out where I have to make changes when the need arises.

CSS Tip #2: What is the right way to indent CSS?

Each line of the following sample CSS code is correct

code:
body { background-color: #FFFFFF }
p {
  color:#000000;
  background-color:transparent
  }
td  {  background-color: #F0F0F0; color: #000000  }

Whitespace is ignored, so how you indent your CSS is entirely up to you as a designer. There is no 'standard' to follow but I can recommend the following:

code:
body { background-color: #FFFFFF }
p { color:#000000; background-color:transparent }
td { background-color: #F0F0F0; color: #000000 }

Why? Well, for one, I like keeping things tight and whitespace generally bloats a filesize unnecessarily. When your concern is bandwidth, this consideration (i.e. minimizing whitespace) is always good.

TOP

Do you find it easy to navigate through this site?

 Yes

 No

 Where am I?