• Tweet
• Share

• Tweet
• Share

It’s not easy being a web developer – in addition to a server-side language, we also have to learn a markup language, yet another (client-side) language and a presentation system. As a result, we tend to focus on what we’re closest to – the business logic – and neglect the front-end.

But you don’t have to be a web dev guru to build great applications: with just a few simple tricks, you can make your web based interfaces more usable and more visually appealing. Here are a few simple CSS tricks every PHP / web developer should know.

twilight divx

Here’s a quick preview of how we’re going to transform our page:

1. Styling Form Inputs, Buttons
When you pop an <input> onto your page, it’s at the mercy of the end user’s system for appearance, behaviour – even size. For example, Firefox handles unstyled inputs differently from IE, and both take many cues from the local OS styling; the same goes for Safari. This is okay on modern OSes — if you aren’t concerned with controlling your visuals — but quite a few users still run “Classic” interfaces, and it’s especially annoying for buttons. Here are some basic styles you should consider for your inputs.

input {
	padding:3px;
	border:1px solid #F0F0F0;
}

These will first add a bit of padding to your text boxes and buttons, and set in stone your border color to a soft gray. In particular, most browsers will render a clean rectangular button with this style present. Consider defining a width in pixels or percents (if inside a container) as well.

2. Styling Tables
Remember to style tables nicely, with table row hover colors, reasonable borders and maybe even striped tables. After all, tables can be dull and boring:

There are two key areas to this: using semantic markup, and taking advantage of CSS selectors. Let’s first fix up our table HTML:

Heading 1
Heading 2




Value
Value


Value
Value

And then add some styles:

table {
	border-collapse: collapse;
	border: 1px solid #CCC;
	font-size: 12px;
}

table thead td {
	font-weight: bold;
	background: #E1E1E1;
}

table tbody tr:hover td {
	background-color: #F3F3F3;
}

table td {
	padding: 5px 10px;
}

First, notice the use of border collapse – this prevents the blocky double-borders on cells. Next, we take advantage of our <thead> and <tbody> to apply a background color to our header row, but a hover effect on body rows. The :hover is on the table row, but the actual background needs to be applied to the cell. Finally, we add a neat padding that keeps text in order. A smaller font size on your table will also cut it down to size and fit more figures on a page.

3. Button Links
Often you want a button-style link to execute a simple action or lead the user to another page. Let’s create a simple “Next” link with this markup:

Next »

We can then style it nicely with this CSS:

a.button {
	background: #AAA;
	color: #FFF;
	padding: 3px 5px;
}

a.button:hover {
	background: #888;
}

We first set a simple background color on the anchor to make it stand out, and ensure the text is still visible. However, feedback is important here – by adding a simple hover color, we make it clear that this is an interface element and not some ordinary link.

4. Typography
It isn’t hard to use simple, clean text on your pages, as opposed to the serif-heavy fonts IE and Firefox will default to on Win/Linux. Try adding this to your main stylesheet:

body {
	font-family: Arial;
	font-size: 95%;
}

Arial isn’t terribly fantastic, but it isn’t too bad either. (Verdana is also a standard option.) By explicitly setting a font here, you avoid leaving at the mercy of the browser/OS, especially when you may not have testing machines of a particular OS available (e.g. OS X).

With all these techniques in play, we have a nice and usable interface: