Dodanie CSS do formularza

Witam,
Dostałem od znajomego podstawowy formularz i chciałbym zmienić jego wygląd lecz nie wiem za bardzo jak dodać do niego CSS.
Oto formularz: http://jsbin.com/uqonud/1/edit
Mógłby ktoś mi doradzić jak za to się zabrać?

Nie wiesz w jaki sposób umieścić css na stronie czy w jaki sposób napisać css czy jesz cze coś innego? Mógłbyś rozwinąć?

Widzę, że mamy do czynienia z kawałkiem solidnego kodu..

@Tomek89Tar nie wiem w jaki sposób napisać CSS. Jak zrobić żeby się odnieść do gotowego formularza.
@dzek69 Nie wiem dlaczego tyle błędów wywaliło. :P

Jeżeli chcesz się odnieść do wszystkich pól (input i textarea):

label input,textarea{
.
.
.
}
jeżeli chcesz się odnieść do konkretnego pola to np.:

label[class=name] input{
.
.
.
}
a jak tylko do text area to
label textarea{
.
.
.
}
Jak będziesz miał jeszcze jakieś pytania to pisz

Dzięki, coś mi już wychodzi. Teraz tylko muszę jakoś to ładnie zrobić.
A i wiesz może dlaczego gdy wyskakuje mi komunikat że należy wypełnić dane pole to rozjeżdża się cały formularz? Dzieje się to jak kliknę w textarea danego elementu i potem kliknę w jakiekolwiek inne miejsce.

Używaj narzędzi deweloperskich i zobacz jak się zmienia kod HTML (tzw. DOM) w trakcie jak dokleja się komunikat. Wg tego dopasuj swoje style, żeby uwzględniły obecność tego komunikatu. Narzędzia dew. masz wbudowane w każdą przeglądarkę oprócz FF, gdzie potrzebujesz dodatku Firebug.

Rozjeżdza się bo na początku masz inputy jeden koło drugiego, a jak do jakiegoś dojdzie komunikat błędu to między nich wpycha się , który załamuje linie. Nie wiem jaki chcesz efekt uzyskać więc trudno mi powiedzieć jak to naprawić

@dzek69 Narzędzia deweloperskie to jest kiedy np. w Chrome kliknę Zbadaj Element i wtedy wyskakuje konsola z kodem html?
@Tomek89Tar chciałbym uzyskać efekt taki, że każdy element jest pod sobą i wtedy bym chciał żeby mi się wciskał pomiędzy elementy. Teraz mam tak, ze one sa jakby w poziomie i jak się tem wciska to mi rozjeżdża formularz.

dodaj
zaraz po tagach <input ...> np:<input type="text" value="Imię i nazwisko:">

W sumie racja, nie pomyślałem o tym. :D Dzięki Ci bardzo, ale jak wyskakuje komunikat "*To pole jest wymagane" to mam wrażenie jakby napis po sobie zawierał enter, bo za bardzo w dół zjeżdża. Jak sądzę jest to zawarte w pliku .js lecz nie mam pojęcia gdzie. Tak to jest jak się dostaje od kumpla kod. :)

W dobrym miejscu dałeś
? Bo mi to dobrze działa i nie ma pustej linii między komunikatem a następnym inputem

Tak zrobiłem:

<form id="contact-form">
<div class="success">Wiadomość wysłana<br>
<strong>Wkrótce na nią odpowiemy.</strong>
</div>
<fieldset>
<label class="name">
<input type="text" value="Imię i nazwisko:">
<span class="error">*Wpisz poprawne imię oraz nazwisko.</span> <span class="empty">*To pole jest wymagane.</span>
</label><br /><br />
<label class="email">
<input type="text" value="E-mail:">
<span class="error">*Wpisz poprawny adres e-mail.</span> <span class="empty">*To pole jest wymagane.</span>
</label><br /><br />
<label class="phone">
<input type="text" value="Telefon:">
<span class="error">*Wpisz poprawny numer telefonu kontaktowego.</span> <span class="empty">*To pole jest wymagane.</span>
</label><br /><br />
<label class="message">
<textarea>Message:</textarea>
<span class="error"><br/><br/>*Wiadomość jest zbyt krótka.</span> <span class="empty">*To pole jest wymagane.</span>
</label><br /><br />
<div class="buttons2">
<a href="#" data-type="reset" class="link2">Wyczyść</a>
<a href="#" data-type="submit" class="link2">Wyślij</a>
</div>
</fieldset>
</form> 

Spróbuj tak:

<form id="contact-form">
<div class="success">Wiadomość wysłana<br>
<strong>Wkrótce na nią odpowiemy.</strong>
</div>
<fieldset>
<label class="name">
<input type="text" value="Imię i nazwisko:"><br />
<span class="error">*Wpisz poprawne imię oraz nazwisko.</span> <span class="empty">*To pole jest wymagane.</span>
</label><br />
<label class="email">
<input type="text" value="E-mail:"><br />
<span class="error">*Wpisz poprawny adres e-mail.</span> <span class="empty">*To pole jest wymagane.</span>
</label><br />
<label class="phone">
<input type="text" value="Telefon:"><br />
<span class="error">*Wpisz poprawny numer telefonu kontaktowego.</span> <span class="empty">*To pole jest wymagane.</span>
</label><br />
<label class="message">
<textarea>Message:</textarea>
<span class="error"><br/><br/>*Wiadomość jest zbyt krótka.</span> <span class="empty">*To pole jest wymagane.</span>
</label>
<div class="buttons2">
<a href="#" data-type="reset" class="link2">Wyczyść</a>
<a href="#" data-type="submit" class="link2">Wyślij</a>
</div>
</fieldset>
</form>

Dzięki wielkie, o to chodziło. :D Teraz tylko sobie już ładnie ozdobię, wywalę ramkę i będzie gites. Dzięki raz jeszcze. :)