Styling a Simple Form with CSS in Dreamweaver

18042011

We will go ahead and create a form and then style it using CSS. Learn how to hand code a simple form and then hand code all of the CSS code you need to create a nice little form. The beauty of this tutorial is that you can do all of the coding in Dreamweaver or any HTML editing software, if you can type words and export an HTML file you will be able to follow this tutorial! Have fun learning some simple HTML and CSS! Follow me on Twitter! http://www.twitter.com Be sure to check out http://www.tutvid.com Check out the blog @ http

psd2cssonline.com – Here is a quick tutorial showing how to stylize text on your Drupal website. The example uses a theme created from a Photoshop design and converted to a Drupal Theme at psd2css Online, but the tutorial applies to any CSS web page really. UPDATE! – we now support WordPress themeing and Joomla themeing as well and everything in this tutorial works just as well for those themes made for those packages as well.

Like this:

Related

Actions

Information

Date : April 18, 2011

Categories : Uncategorized

35 responses

18042011

emmy009(21:25:18) :

also i use macromedia dreamweaver 8,i wanna know is it possible to create standard images like your header(barner) and so on with dreamweaver or i gata do that in another program like photoshop etc.pls nat, i await your reply.. thanks again.

18042011

emmy009(21:53:27) :

but i gat a problem using tables, that’s the normal tables, am made to understand that i can also use css to design a webpage but i tried looking for such videos here and couldn’t get what exactly i was looking for, i was wondering if u could teach me that by doing a video for me, or even teach me how to use tables to design a table ,

18042011

emmy009(22:09:05) :

hey nathaniel,am mimshach from Nigeria and i really love yr videos , i have really learnt alot from you. i wanna say thank you.i gat this littlle challenge,Ok. i can fairly design a webite now thanks to you and some other guys here on youtube…

18042011

Carlioslasaurus(22:30:39) :

You are a wonderful instructor, thank you.

18042011

i3ak3ri301(22:53:03) :

@sumosumo84 This was so long ago I don’t even have it anymore

18042011

sumosumo84(23:32:09) :

@i3ak3ri301 do you have code behind what your doing, or are you magically expecting it to work. For email all you need is html and javascript. If you want logging in and stuff, you need php. Comment back, and ill pm you with exact code you need

18042011

sumosumo84(23:50:55) :

@i3ak3ri301 do you have code behind what your doing, or are you magically expecting it to work. For email all you need is html and javascript. If you want logging in and stuff, you need php.

18042011

angelchastainc3ln3v(23:54:23) :

My name is Mike from LA Although there busizz4me.info

19042011

DeeJayTimo(00:16:00) :

@davidknag You did this for learning, you didn’t do it for creating a whole website. Check his other tutorials, this is “Styling a Form with CSS” not “Creating a form for my website.”

19042011

TinchoNa95(00:33:04) :

Hey! thanks for this great tutorial, but I had a problem how can I do to put my email in the css, so the people who wants to send me a messenge I could read it on my email home page. Thanks

19042011

Seryosin(00:45:02) :

@davidknag You need to use a php. This tutorial shows only how to make the visual part of contact form.

19042011

C0LEMAN777(00:57:28) :

Hey thanks for the tut, believe it or not i came to this video with no knowledge of CSS and you gave me some basics thanks

19042011

cheatonly2win(01:24:09) :

Could have been better.

19042011

GAMESGLORIOUSGAMES(01:26:12) :

ie angers me sooooo much… my form does not display properly

19042011

silentpro105(01:28:38) :

Hey man, do u ever use firebug? The CSS changes translate really cool for beginners over videos like these…

19042011

ahmedshaie(02:23:43) :

tutvid, i wanted to ask, can you do a video tutoiral on a twitter style status box, with counters and rollover effects, i’ve tried to do it, but keep stuffing it up, or ending up without a clue, i have sent you a message before, but u haven’t replied yet

19042011

Techible(02:51:07) :

conTEXT is a good text editor i use for editing code on my Windows Vista

19042011

imegglobal(03:39:35) :

Hi there- Your videos are so helpful! But I am having a problem with my contact form. My comments field is not in block format. The word “Comments” appears next to the E-mail input field and the Comments text box is on the next line. Any idea where I went wrong? Thank you for all your help.

Thank You so much Nathaniel, a’m learning a lot with your videotutorial, this code is a little hard, but i will try understand everycode^^, thank man, keep helping to world ^^,
Greetings from peru ^^, Sorry for my bad English

19042011

graphicsite(05:02:49) :

This is so great and very helpful. Thanks a lot.
Christa

19042011

DrJams(05:10:20) :

Don’t forget to use the accesskey Attribute in your forms. I love sites that use them. (so I can be lazy)

19042011

Theben0987(06:04:17) :

@davidknag If you go to his website, he has a tutorial on how to send it via php.🙂 if not, just good, how to send mail via php.

19042011

romanticblade(06:23:16) :

@fredv1 it is true that to learn coding its better to use plain text editor, but when you get to difficult codes, it starts getting hard to orientate around. thats why Dremweaver is irreplaceable when actually managing the web site. you can directly upload the files to ftp and is great when ure not the only one working on it.

19042011

CompGuy911(06:40:18) :

Thanks, i am going to put da on my site

– Joseph/CompGuy

19042011

kingvlad451(07:23:15) :

im changing the babyran en2 site but there a little problem when i minimize the firebug it goes back to normal

19042011

turnitintolove(07:36:40) :

excellent tutorial. thanks!

19042011

psd2cssonline(08:07:53) :

You know I didn’t even realize that I didn’t do that in the video. Absolutely – you can change any CSS value or even add new ones and delete existing ones live while you’re viewing the page.

19042011

acorntechnique(08:26:28) :

Thanks very much for the interesting video!

19042011

w1shEX(09:08:34) :

You know, if you’re offline (as in, don’t have to upload) you can use that little style-viewer IN Firebug to change CSS.

Saving you even more time.

19042011

TheForgottenPanzer(09:19:10) :

ah?

19042011

Antimidate(09:56:54) :

Ha ha!

19042011

iskate40(10:27:31) :

hahaha

19042011

carlogonewild(10:34:27) :

will you clear that throat first bfore you start your tutorial

19042011

Faks89(11:19:40) :

well, that “firebug”.. I really dont know if its good or not, but have a look to “Web Developer Toolbar”. Its really nice and you can modify the css in firefox to and see the resoults live.. try it😉