You are here:
Web Design > CSS > CSS Tips I.

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.

You are here:
Web Design > CSS > CSS Tips I.