To capitalize a string of text using CSS you can use an inline style tag, e.g.-

<div style="text-transform:capitalize;">
this was typed in lower case and capitalized with css
</div>

To create a (reusable) class, add the following to your style sheet (.css) file;

.captxt { text-transform:capitalize; }

then use the following in your HTML;

<div class="captxt">
this was typed in lower case and capitalized with css
</div>

In addition to capitalize, you can also use CSS to transform text strings to upper case or lower case, e.g.-

.uctxt { text-transform:uppercase; }

or-

.lctxt { text-transform:lowercase; }

###

I was playing around with Wordpress trying to create a theme where the blog posts would not use a lot of screen space. I wanted to keep the content and background (wallpaper) image centered on the screen no matter what size the browser window was.

This is fairly simple to do, after you take a few things into consideration.

If you plan to use a fixed width layout for the page’s content, you will want your background image to act as a frame for the content, and will most likely keep the overall width of the image small.

If you plan to use a fluid layout, (one that expands to 100% of the screen size), and plan to design for higher resolutions, (e.g.- 800×600, 1024×768 or higher), you can create an image that is 1600 pixels wide (or wider) and the same CSS will ignore the extra width that isn’t used.   Be sure to keep the key elements of the design centered in the middle 800 to 1000 pixels.

Here’s a screen shot of the “virtual iphone” I wanted to create. It was done as a Wordpress theme to create a micro-blog.

The CSS to center a background image is very simple:

[READ MORE...]