You are reading_
7 tiny CSS tricks you’ll always need for a wordpress theme.
Here are 7 CSS tips that you will always going to need in any CSs-related stuff; creating a wordpress theme or modifying one. These are simple CSS codes with a direct explanation (I guess). For a further reading about it, maybe you can try to Google them out. This is based on my current knowledge and experience - sorry if there is any mistakes. 
Images and examples are given to guide you through the words.
1. The universal selector - kill the white spaces, asterisk!
This is among the first main thing to write when you start creating you stylesheet file. The asterisk (*); known as universal selector; is used here to reset all the padding and margin of your browser to 0px. Because browsers has their own default padding and margin value, and you don’t want it in your style.
*{
margin:0;
padding:0;}
I find this is very useful if your header is supposed to start from the very top of the page.
2. I’m a fixed-width layout; center me on your screen.
When I started creating my own wordpress theme out of nothing, I have this problem to put everything in the center of the page. I know I need to fix somewhere in the CSS but don’t know which one until I figured it out while playing around with Firebug.
Simple code give big impact.
#wrapper {
margin:0 auto;
}
That piece of code means: 0 pixels on top and bottom, then auto align the left and right of the wrapper. yeah. thats it.
Update: For IE, you need to add some more. Thanks to ikram-zidane. Well, read about it here.
3. The dotted outline remover
The dotted outline here means…er..the dotted outline on your linked images/button that appears when you click them. (on click state)
This normally occurs in Firefox. It even worst if your linked image is placed on the right side of the page and the dotted outline appears throughout the page. Ugly, it is.
a{
outline:none;}
add above code to your existing link style or any parent element to fix this up.
Update: However it has a big disadvantage in term of usability, as commented by Aviator.
4. No border for smileys, please!
Some of wordpress themes available out there assign specific border style to any images in the blog post section. Meaning, if you put an image in your post, say, a red 1 pixel solid black border appears around it like magic! (yeah right) well, maybe you like it. But somehow it also appears on your tiny and cute little smileys - make them not cute anymore.
To remove it;
img.wp-smiley{
border:none;}
Depending on the parent style of the stylesheet, you may need to add class/id in front. I already commented about this in Infomalaya’s Transcending CSS entry.
5. :focus! pseudo-class in session
You may be familiar with :hover class. But how about the :focus? Some may be confused between :focus and :active. Is it the same? Or not? well, actually they are not the same. Apparently, :focus did not work in IE. Only in Firefox.
What I am going to highlight here is the use of :focus in making a better looking forms, maybe for your comment form. This works when the blinking cursor is placed into the form area, although your pointer is moving elsewhere. Focus, but not active.
input#form{
background-color:#dddddd;
border: 1px solid #aaaaaa;
}
input#form:focus{
background-color:#ffffff;
border:1px solid #0099CC;
}
You can also use images as the background. For a live demo, you can view my Arrow1.0 wordpress theme. Place the blinking cursor in the search box or the comment forms to get the feel right. haha 
6. text to stay out of my screen
This is a basic stuff. Look at the flisterz:blog logo up there. Actually, that image is styled into the h1 element of the title. If you are using Firefox, click on View> Page Style > No style. (This will eliminate all the style of any website) You will see the word Flisterz:blog as the title. Not that logo anymore. But, where did this text is hiding all this while?
This is a very useful trick for various application; image replacement heading ( not using in this blog) , buttons and so on. And it is done using a very nice little CSS code.
#anything{
text-indent: -99999px;
}
In english; The text in indented -99999 pixel to the left side of your computer screen. So, logically it will no appear on the screen. Unless you have a wider screen than that, maybe?
7. using image as the button
Its normal that we always hate the default shape/style of our browser’s buttons (especially if you use Safari.LOL). So, we always want to change the buttons for our web page and stuff. Well, fortunately we can. With the help of CSS, you can change the button with any image of your choice. Design your own button to replace the old default one.
#submit {
background:#FF9900 url(images/submit.jpg) no-repeat center;
border:medium none;
height:29px;
width:208px;
}
This is the code I am using for the current theme. Tweak it a bit for your own. Or maybe you want to make a much sexier button.
So, thats all. Only 7 this time. I may post more in the future. Let me know - any comment, corrections, inquiries or anything; via the comment form.
azraai —
30 Jul 07 / #kalau curve tab mcm mana yg bukan fixed size.
Bat —
30 Jul 07 / #Sharing is caring..hehe..Aku selalu guna universal selector tu…
ikram_zidane —
30 Jul 07 / #imo :-
no 4 - useful for beginners..
no 5 - not even important at all..
no 6 and no 3 - you might not want to includes these. its against usuability in lots of way.. viewing in handheld will make you want to kill yourself..
no 2 - not complete yet.. you need to put codes for the one for ie.. text-align center and realign on the left..
Aviator —
30 Jul 07 / #These tricks are just as important for general uses as they are for WordPress themes.
I would not agree on the remove outline trick (#3). Usability will break. You should design for attitude, not for browsers.
Image replacement (#6) is a heavily debated topic. There are lots of techniques, with varous variations, but the one I always use is the same as yours
Cheers!
flisterz —
30 Jul 07 / #oh so #3 will break usability? in what way?
I didnt know about that, but i guess thats my attitude, not about the browser
image replacement: i thought it is not a problem since a lot, i mean, most of CSS websites use it.
So, we should just put the image into the page using the normal
img src=" "code?thanks ikram and aviator for the information.
xeroxaven —
01 Aug 07 / #haha..yeah we have to use img src=” “…lol..jokin..
hurm..#3 againts usability? what u do with that dots for?? huhu..
i use that bcoz i hate that dots..
flisterz —
02 Aug 07 / #yeah seriously, i hate those dots as well.
Aviator —
04 Aug 07 / #OK, for better understanding on usability (or is it accessibility?), let’s picture this scenario:
Bob is a ‘disabled’ person. For some reason, he can’t use the mouse. So, how does he cycle through all the clickable/editable elements on the page? He uses the “Tab” key repeatedly. When he finds the right element to click on (such as a link), he uses the “Enter” key. But how does he know what element is he “focusing” on? The answer lies in the DOTS. “The dots represent focus”.
So what if a site disables those dots? How can Bob browse through the page without knowing what element is he focusing on? You try it yourself. Using only the keyboard, try to locate the “about” link on this page and press on it. It’s so much easier if you can see the dots.
I bet there are more sensible scenario than this one. But you get the idea. Web is a global thing with a wide range of demographics. You should assume every possibility. You should not hate those dots. Live with it.
flisterz —
05 Aug 07 / #ooh. now i get it!
thanks a lot for sharing this. :))
ryan —
11 Aug 07 / ##1 kills the margins on the formatting of posts and scrunches all the paragraphs together.
I only want to apply a zero margin to the top for the header…
gab —
20 Aug 07 / ##3 ftw!!!
Extremist Thinker —
13 Sep 08 / #bro. kalo image yg di letak dlm artikel. nk suh dia ade border. apeh eh code dia