CSS Tips and Trix

**intertec** · 02-08-2008 01:13 AM

CSS shortcuts
In css there is many shortcuts that will spear you and others some time. Using shortcut will also make your code look better and it will save you some time. For instance:#bad_example
{
background-image: url(image);
background-color: #00000;
background-repeat: repeat-x;
background-position: top left;
}

#good_example { background: #000 url(image) repeat-x top left; }So if we look at the both examples we can see that the #good_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:
#bad_example
{
margin-top: 1px;
margin-right: 2x;
margin-bottom: 3px;
margin-left: 4px;
}

#good_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];

If all off them is 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] */

Writing good structured code
It’s important to write nice looking and structured codes, it will be simpler to see and edit and it’s nice to your eyes. Good looking codes is different from people to people, but a tip is to block your styles, wich means that you’re blocking the child of an element, like this:
#menu li { /* some neat code here */ }
#menu li a { /* this is the child of #menu li }

By doing this you can see your childs better and it will make it easier to edit your code.
Hacks for IE
Some of you out there is still working like hell to make your site look the same in Internet Explorer as in the “modern” browsers. While doing this you may use ugly hacks like:
/* IE<7 */
#div { /* some changes for IE */ }

But in my opinion that’s just wrong, it takes unnecessary space in your documents, what you should do is to use conditional statements, and they work like this:
<head>
<link type="text/css" rel="stylesheet" href="normal.css" />
</head>

**djviraj** · 02-08-2008 04:01 AM

Originally Posted by intertec

CSS shortcuts
In css there is many shortcuts that will spear you and others some time. Using shortcut will also make your code look better and it will save you some time. For instance:#bad_example
{
background-image: url(image);
background-color: #00000;
background-repeat: repeat-x;
background-position: top left;
}

#good_example { background: #000 url(image) repeat-x top left; }So if we look at the both examples we can see that the #good_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:
#bad_example
{
margin-top: 1px;
margin-right: 2x;
margin-bottom: 3px;
margin-left: 4px;
}

#good_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];

If all off them is 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] */

Writing good structured code
It’s important to write nice looking and structured codes, it will be simpler to see and edit and it’s nice to your eyes. Good looking codes is different from people to people, but a tip is to block your styles, wich means that you’re blocking the child of an element, like this:
#menu li { /* some neat code here */ }
#menu li a { /* this is the child of #menu li }

By doing this you can see your childs better and it will make it easier to edit your code.
Hacks for IE
Some of you out there is still working like hell to make your site look the same in Internet Explorer as in the “modern” browsers. While doing this you may use ugly hacks like:
/* IE<7 */
#div { /* some changes for IE */ }

But in my opinion that’s just wrong, it takes unnecessary space in your documents, what you should do is to use conditional statements, and they work like this:
<head>
<link type="text/css" rel="stylesheet" href="normal.css" />
</head>

thankzz