kailoon.com Tutorials . Comic . Web Design . Freelance . Blog

5 Useful CSS Tricks

As you guys know, I am CSS designer now working under a blog advertising company. Most of the time, I deal with the CSS codes and web design. I found that CSS is a useful tool to beautify your website. However, for those who don’t know CSS, it can be a bit complicated but once you know them well. You can make friends with them but maybe you need to leave your old friend (IE6) first… All right, today I am going to share some of the CSS tricks with you. So, forget about the graphic tutorials before first. Let’s learn something different today.

1. FONT

Usually, we beautify font with several line of codes like this :

h3.my {
	font-size: 28px;
	font-weight: bold;
	font-family: "Arial", Helvetica, sans-serif;
	color: #333333;
	line-height: 24px;
}

<h3 class="my">Loon Design</h3>

Do you find the code is a bit too messy or too long? Here is my solution for them:

h3.my {
	font: 900 160%/240% "Arial", Helvetica, sans-serif;
	color: #333;
}

<h3 class="my">Loon Design</h3>

Will this cut down your coding time? The output will be:

Tips

• The order of the attributes are font: weight size/line-height family;
• 400 = normal and 900 for bold

2. Margin and Padding

Wondering what how to differentiate them? You check this site for details. We use margin and padding most of the time when we write up the codes. However, I am not to say the padding problem with IE6 ( seriously, I am having a bad time with IE6 during my work, may post it out later ) here but try to give you some tricks on how to make it in 1 line.

Normally, we code like this, we take margin as example :

.my {
	margin-top: 10px;
        margin-bottom: 20px;
        margin-left: 5px;
        margin-right: 5px;
}

but now we can make it in 1 line like this :

.my {
	margin: 10px 5px 20px 5px;
}

Tips

• margin: top right bottom left;
• or when you have the same margin for the top and bottom, it become like this : margin: 10px 0;
• while margin: 0 auto; means vertically align.

3. Class and ID

the symbol for class selectors is (.) while id selectors is (#), but what’s the different between them?

ID
• IDs identify a specific element and therefore must be unique on the page. It can only be used once in a page.
• We consider that it has the higher level than class. It is more specific.
• can be used and an anchor name.

Class
• Classes mark elements as members of a group and can be used multiple times.

Actually, you can use both id and class in a div or element. It’s priority of attributes are depend on id first.

4. Ignore by IE – !important

This is a trick to write something that ignore by IE but can be run in all browsers. The attributes before the !important will be ignored by IE.

Example: margin: 20px !important; margin: 10px;

There will be 20px margin for all browsers except IE which will have the 10px margin. This is useful when you doing some positioning adjustments and most of the time it is showing different result in IE browser.

5. Block vs. inline level elements

Most of the HTML elements are block or inline elements. What is the different between them?

Block
• Always begin on a new line.
• Height, line-height and top and bottom margins can be manipulated.
• Width defaults to 100% of their containing element, unless a width is specified.
• Example <div>, <p>, <h1>, <form>, <ul> and <li>

Inline Elements
• Always begin on the same line.
• Height, line-height and top and bottom margins can’t be changed.
• Width is as long as the text/image and can’t be manipulated.
• Example <span>, <a>, <label>, <input>, <img>, <strong> and <em>

Conclusion

Well, that’s all I wish to share with you guys. Feel free to drop me a message if you find any question about the provided tricks. Thanks!