Basic Concepts using CSS

CSS is simple enough to control a few page elements. CSS is a very powerful tool. Stretch your imagination, with CSS you can create what you really want your page, layout, or site to look like is only limited to the amount of time you want to spend designing.

In CSS there is many tricks that will spare you and others some time. Using these tricks will also clean up your code making the code look better and it will save you some time. For instance:

#poor_example{

background-image: url(image);

background-color: #00000;

background-repeat: repeat-x;

background-position: top left;}

#great_example { background: #000 url(image) repeat-x top left; }

So if we look at the both examples we can see that the #great_example looks much better and needs only 1 line. The background properties works like this:

background: [color] [image] [repeat] [position] [attachment];

There is many other shortcuts so i won’t show everyone, but here’s how margin/padding works:

#poor_example{

margin-top: 1px;

margin-right: 2x;

margin-bottom: 3px;

margin-left: 4px;}

#great_exmple { margin: 1px 2px 3px 4px; }

If we look at this one, we can see that the margin/padding works like this:

margin: [top] [right] [bottom] [left];

With all off the margin quadrants the same size you will only need to write margin: [pixels]. But there’s some other tips you could use with margin:

#margin { margin: 2px 5px; } /* [Top/Bottom] [Right/Left] */#margin { margin: 2px 5px 1px; } /* [Top] [Right/Left] [Bottom] */

Structured coding

The importances of writing nice looking and structured codes, will make the design simpler to see and edit plus the structed coed is easy on your eyes. A good tip is to block your styles, wich means that you’re nesting the child of an element, like this:

#menu li { /* some neat code here */ }    

   #menu li a { /* this is the child of #menu li }

This way you can see your corresponding codes better and it will make it easier to edit your code.

Topics: CSS, Design, Web Development