5 Useful CSS Tricks
February 28th, 2008 in CSS by kailoonAs 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
- The order of the attributes are font: weight size/line-height family;
- 400 = normal and 900 for bold
Tips
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; }
- 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.
Tips
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!
Good write-up, I am regular visitor of one’s web site, maintain up the excellent operate, and It’s going to be a regular visitor for a lengthy time.
thanks kailoon great..
Nice Tutorials…
Keep it up.
Nice work dude… It is helpful for me as well as others..
Amei79, no the two are used together, but CSS doesn’t = HTML.
A CSS stylesheet is in a seperate file and included into an HTML file to help style the output that a visitor sees.
Css is very important for website developing . Really it’s very cool.
HTML also very important one.
cheers
Elijah
“4. Ignore by IE – !important”
Did you really test this? The !important flag is supported by Internet Explorer since version 5.5. Anyways, there are far more efficient ways to write browser-specific CSS.
css Font examples , Properties , Attribute – – //
http://www.css-lessons.ucoz.com/font-css-examples.htm
sir,
i am new learner for css please give me details of the css
Hi Anand, actually, you can use it within HTML, means that you already can handle it. What you need to do is start using div to replace table.
CSS is useful when you need a style to be used multiple times for a site in same/different pages. Keep in mind, you are dealing with boxes (div) when building a site. That’s all I can advise :)
lastly, practices make perfect!
Dear Sir
I just go through the tips which you have mentioned. I am fresher to make css layout kindly suggest me how to start this thing. Actually I know css because of I use in html page. But Still I am not able to make a full css layout
Kinldy tell me should I do to be proficiene in css layout
xaer8 :
Ya, Practices make perfects! :)
Madmann :
Thanks!
Very good tut! Bookmarked! ;)
very nice tutorial
Whatever it is, try to test html and css code yourself. You will know the difference. I recommend Adobe Dreamweaver the best or NVU which can be obtain for free. Use examples from available tutorials or tutorials from http://css.maxdesign.com.au/index.htm .
omg, now is condom already :o
html is like a pclear condom while css is a green glow in the dark coating. it makes the condom a lot more attractive and less plain. lol
Tomas:
Yup.
grant allen:
Agree :)
xaer8:
hahaha… interesting description :)
HTML code is like the face, while CSS code is like the make-ups. Without make-ups, you won’t look pretty. Get it? Anyway, very nice tutorial/ tips..
a complete one hooooray!!!!!!!
the basic foundation is important
hahahh….can learn also woot :) it is easy to understand and u can pick up very fast:)
nice tutorial..
I love it
since I am not a web designer/developer/programmer, valid theme generator would be useful :D
hahha..is good also to be feed :) auto generated code .. quite useful too :)
understand html well, but css .. hmm .. i’m definitely a noob at this. you know how they spoon-feed us with the “auto generate” css codes functions most of the time ?? blame them .. :P
Amei79 :
I think Cometh & Michael Wales had already answer your question :) feel free to drop me a message if any question requirements :)
If you still can’t get it. Put it in this way. HTML is the parents and CSS is their child, CSS has beautify his parents life since he was borne. Now, The kids grow up and can have their own career but still they are under protection by their parents :) Ignore me if you can’t get it :) Actualyl Michael Wales explain well there :)
Cometh :
thanks dude:)
Michael Wales :
Yeah ! thanks for your help in explaining :)
@Amei:
HTML is the structure and data of the site – there should literally be not a single bit of design within the HTML (fonts, colors, position, all are bad things in HTML).
CSS fills that gap, by still allowing you to make your site pretty. CSS is the design of the site (fonts, colors, position).
Sure, you can do all of this in HTML. But then you make the site harder to maintain on yourself, alienate handicapped users, and alienate users that may be using a different browsing method than you (for instance, a different browser, a mobile browser, a screen-reader, a text-only browser, etc).
Let me answer…Let me answer…
Hmmmm, lets see.. I am quite noob at this…
You definitely need to know basic html first….then CSS. Like what they say, better learn to crawl then walk.
But then, you can also straight away jump to CSS and along the way you will easily learn HTML also….
Hahaha..
Ignore me…..
Better wait for Loon’s answer… =p
Does CSS code=HTML code? Im not familiar with this, and Im a idiot in IT field…:P
No, HTML and CSS are two different languages.
@kailoon – great tutorial, thank you!