hey guys ,i hope some trouble with my html files , i want to change the design of my search bar with style that i found in the internet ,but i didn't know hot to add it , can u please give me a hand how can i change it to like the one i want (download) thanks and waiting for your reply !
some Html code :
----------------index.html-------------
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css"></link>
</head>
<body>
<center>
<div class="page">
<div class="header">
<div class="sublinks">
<a href="home.html"> Home |</a>
<a href="Contact.html"> Contact |</a>
<h4> Recherche <h4>

<input type="text" size="30"/>
<input type="submit" name="submit" value="Recherche"/>
</div>
</div>
</div>
------------------------------------------
and this is the css file that i have download :
---------------style.css ----------------
{
body{
margin: 0;
padding: 0;
}

form{
width:185px;
padding: 10px 0;
}

form .text-field{
float: left;
border: 2px solid #E2E2E2;
padding: 2px;
}

form .text-field:focus{
border-color:#333;
}


input.submit{
width:16px;
height:16x;
display:block;
overflow:hidden;
text-indent:-999px; /* To remove any default text on the button*/
line-height:16px; /* required for IE */
background:url(search-sprite.gif) no-repeat 0 0; /* This will display the search icon by default */
cursorointer; /* Hand cursor for the normal state */
border: none;
float: left;
margin: 3px;
padding: 0;
}


input.submit:hover{
background-position: 0 -16px; /* This will display the dark search icon on hover */
}


input.submit:active{
background-position: 0 -32px; /* And finally, this is the one that shows the loader */
cursor:wait; /* Shows the wait cursor on click */
}
---------------------------------------------------