5 Useful CSS Tricks

February 28th, 2008 in CSS by

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:


Loon Design

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;
}

3. Class and ID

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

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?

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!

add RSS

Comments

New to Old.
  • S.Sivakumar
    Feb 16, 2011
  • John
    May 27, 2009
  • http://acidmartin.com Aug 15, 2008
  • Amit
    Jun 10, 2008
  • http://www.kailoon.com May 21, 2008
  • http://www.nothing.com May 20, 2008
  • http://www.kailoon.com Apr 20, 2008
  • Madmann
    Apr 19, 2008
  • http://themegears.com Apr 19, 2008
  • http://www.kailoon.com Apr 19, 2008
  • http://kayzio.com Apr 19, 2008
  • http://www.kailoon.com Apr 16, 2008
  • http://themegears.com Apr 15, 2008
  • http://www.kailoon.com Mar 30, 2008
  • http://daniiswara.net/ Mar 29, 2008

Reply

Write your comment here...




XHTML::
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Dribbble

Some of my recent works from dribbble, do check it out and leave me some feedbacks! Or follow me on dribbble and get updated.