Using a CSS search form?

I'm in the process of converting my CSS/HTML files over to a Drupal theme. I had designed a CSS-styled search form prior to this. I found an interesting article here: http://www.pixelclever.com/how-to-theme-search-form-drupal-6 discussing theming Drupal 6's default searchbar.

I have few questions, it appears to be setup like an HTML document, so can I reference the external style.css sheet in the "search-theme-form.tpl.php" file?

Here is my code. It is a bit... extensive for a search form I admit. But my site is very graphic oriented. I forgot to mention, it does use a bit of JavaScript, will this be a problem?

<input name="searchbox" type="text" class="searchbox" value="Search Nside Elite"
	        onfocus="if(this.value == 'Search Nside Elite'){this.value = '';this.style.fontStyle='normal';this.style.color='#999999';}" onblur="if(this.value == ''){this.value='Search Nside Elite';this.style.fontStyle='italic';this.style.color='#222222'}" />

.searchbox {
	background-position: top;
	background-color: #515151;
	background-image: url('Images/searchbox-shadow.png');
	border: 2px #333333 solid;
	outline: none;
	background-repeat: repeat-x;
	height: 20px;
	margin-right: 3px;
	float: right;
	margin-top: 1px;
	width: 250px;
	text-indent: 5px;
	font-size: 10pt;
	color: #1D1D1D;
	font-style: italic;
	font-family: Arial;
}
.searchbutton {
	background: url('Images/go-button.png');
	background-repeat: no-repeat;
	cursor: pointer;
	width: 53px;
	height: 28px;
	border: 0px;
}
.searchbutton:hover {
	background: url('Images/go-button-gifsmooth.gif');
	background-repeat: no-repeat;
	border: 0px;
}
.searchbutton:active {
	background: url('Images/go-button-pressed.png');
	background-repeat:no-repeat;
	border: 0px;
}
.searchbox:focus {
	border: 2px;
	border-color: #555555;
	border-style: solid;
}