Written by Dale Humphries
When using forms on a website, they can look plain and boring. But with CSS you can make the text boxes and buttons look very stylish.
To start with you'll have to have your HTML file open in your favourite text editor. You're ready to go, let's begin.
1. The first thing to do is to put a form into your HTML file, we'll just put a basic one in for time being, below is the form HTML code:
<form> <input type="text" name="name" id="name" value="Name" /> <input type="text" name="email" id="email" value="E-mail" /> <input type="submit" name="submit" id="submit" value="Send" /> </form>
Basically, this wil show text boxes and a command button into the website. It is stating the input type, "text" for text boxes, "submit" for the command button and it's name, (what text will show in the text boxes or on the command button). Notice the id="name", id="email" and id="submit" in all three? This will be very important in the next step
2. Now we open our CSS file, remember the "id's"? Well now we need them. In the CSS file, type this:
#name {
border: 1px dashed #ccc;
margin-bottom: 7px;
font-family: arial;
padding: 2px 0px 2px 4px;
}These properties above should be pretty straightforward, it has a border around it, a 7px bottom margin, Arial font and some padding inside the text box. The "name" text box should have a white background with a dashed light grey border. It does? Good.
3. Now youve done this, just copy and paste it below itself and change the id name to "email", this will make the emaill box the same. You can do almost anything to a text box or command button with CSS, size, colours, positiong, hovers... the list goes on. Now we can do the button, type this into your CSS file:
#submit {
border: 0px;
background: #fff;
font-weight: bold;
font-family: arial;
font-size: 9pt;
color: #4A8EBC;
}This gives the button no border, a white background, 9pt bold arial font and a nice blue colour. So technically this coding is just small blue text, don't forget you can do almost anything wit this, so have a play around.
Thats it for this tutorial, now you can style your forms to any extent you wish!
Thank you for using this tutorial
