Styling for Mobile devices (cell phones, some PDAs, etc) can be accomplished in much the same way as you can customize the style for printed pages.
The main difference between the two is that instead of using a media type of "print", you'll use a media type of "handheld".
User agents (web browsers) decide which CSS media type to use based on what they are doing. Much like the "print" media type is used by browsers whenever they print a document, the "handheld" media type is used by many different small-screen browsers, when present.
One of the things you might consider doing for small screens, is, for example, hiding the sidebars and other non-text elements. Or, if you use a fixed width page, you'll probably want to eliminate that fixed width restriction, and perhaps make the blog entirely simple text format, allowing it to wrap properly on small screens.
It is also good practice to use percentage-based measurements rather than fixed pixel widths. For example, in your css file give the tag body one text size and in text based tags or any tags that you use text in giving them a percent to use and test it on a phone.
Large background images often do not adjust well to small devices. It is best to exclude these from your handheld stylesheets and go for simple solid colour backgrounds instead.
If you lack a small screen web device to use, there are emulators available that can view your site in this mode. The Opera Mini Emulator can view your site.
This sample code for a mobile style sheet makes the background white and the text black.
/* Mobile Style Sheet */
@media handheld {
body {
background: white;
color: black;
}
}
This would usually be inserted at the very end of your existing CSS stylesheet. A handheld device will pick this up and use the special stylesheet instead of your normal theme style.