helpful css tips.

Over the years, I have wasted a lot of time on “guessing” what would work and what would not work. Anyone just starting with CSS or looking to modify someone else’s CSS will hopefully find these tips helpful and time saving.

• Padding or Margin? These two attributes are often used, and more often confused. The margin attribute defines the space around an HTML element’s border. The padding attribute refers to the space within the border.

Example:
p.marginex { margin:20px; border:1px solid #ccc; }
p.paddingex { padding:20px; border:1px solid #ccc; }


This illustrates using margins.

This illustrates using padding.

• Class(.) selector or ID(#)? selector I explained the usage of classes v. IDs in an earlier post but this is something that still confuses people. Classes are used over IDs when you have something that might repeat on a page. IDs are used for unique items like header, navbar, container, footer. My rule of thumb: if there is a possibility for something to appear multiple times on the same page, use a class, if not, use an ID.
• How do I deal with line breaks without tables? CSS is not for the light hearted, but using display: block and display: inline correctly will save many headaches. Remember, display is your friend. If you would like to have a line break after an element, a class or an ID, make sure to define display: block. If you do not use that, chances are you will have the code following that seep up into where it does not belong.
  will not even help you at this point. On the other hand, if you would like to create something like my post categories list (see above, right below the post title) and you want to put all the list items in a row, on the same line, use display: inline. display: inline also works out nicely when you are using multiple columns in a layout. Anyone who has tried to do this will smile at this point, because we have all seen the left column in position and then having to scroll down the height of the left column before the right column begins. Display inline will take care of that.
• The “float” property Most people will have to use floats at some point when using CSS. Floats are most commonly used to float text around a graphic, like I often do here on jappler.com. Floats are also commonly used with using multiple columns in page layout. Jappler.com uses floats all over (header, navbar, columns, etc). By using a float, you can shift a fix width box to the right or left with the surrounding content flowing around it. (think magazine picture layout).
• The “clear” property If you are using floats, you most likely will need to use the float property too. The clear property sets the sides of an element where other floating elements are not allowed.
  Ex. If you set clear to left, an element will be moved below any floating element on the left side.

Hopefully these tips/explanations will help you understand how to get CSS to work for you…and not so much you working for CSS.
[tags]CSS, margin, padding, classes, IDs, float, clear[/tags]