You drop notepad as an editor and choose from one of the many freely available CSS editors?
Random example:
http://speckyboy.com/2008/09/15/7-free-css-editors-which-is-the-best-you-choose/
EDIT: So... to make this a programming question, and since you are on Windows XP, I made a little HTA application that does color code previews:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:hta="http://tempuri.org/microsoft/hta">
<head>
<title>Hex Helper</title>
<hta:application
id="HexColor"
version="0.1"
applicationname="Hex Helper"
sysmenu="yes"
maximizebutton="no"
minimizebutton="no"
border="dialog"
innerborder="no"
scroll="no"
selection="no"
contextmenu="no"
windowstate="normal"
/>
<style type="text/css">
* {
border: 0 none; margin: 0; padding: 0;
}
html, body {
height:100%;
background-color: black;
}
#container {
padding: 5px;
}
#preview {
width: 130px; height: 90px;
border: 2px ridge;
}
#colorcode {
width: 100%;
height: 1.2em;
}
</style>
<script type="text/javascript">
var trim = /^\s+|\s$/g;
var fullColor = /^\s*#?([a-f0-9]{6})\s*$/;
var abbrColor = /^\s*#?([a-f0-9])([a-f0-9])([a-f0-9])\s*$/;
function setColor(hex) {
hex = hex.replace(trim, "");
var preview = document.getElementById("preview");
var m = null;
if (m = fullColor.exec(hex)) {
preview.style.backgroundColor = "#"+m[1];
} else if (m = abbrColor.exec(hex)) {
preview.style.backgroundColor = "#"+m[1]+m[1]+m[2]+m[2]+m[3]+m[3];
}
}
function setValue(preview) {
var colorcode = document.getElementById("colorcode")
colorcode.value=preview.style.backgroundColor;
}
</script>
</head>
<body onload="window.resizeTo(150,150)">
<form action="#" id="container">
<div id="preview" onclick="setValue(this);"></div>
<input id="colorcode" type="text" maxlength="7" onkeyup="setColor(this.value);" />
</form>
</body>
</html>
Save the above to a file called HexHelper.hta and run the file. Here is how it looks like. Feel free to modify in any way you want.
