You should run your web page under last versions of browsers, because; in this tutorials we will use the CSS3 and HTML5.
Let's first create a new folder and call it (Mail).
In the folder let's create to kind of files HTML and CSS, index.html & style.css.
First : HTML Code:
We need first to create a form that we will styled with CSS.
so the form code will be like this:
<form class="form"> <p class="name"> <input type="text" name="name" id="name" /> <label for="name">Name</label> </p> <p class="email"> <input type="text" name="email" id="email" /> <label for="email">E-mail</label> </p> <p class="web"> <input type="text" name="web" id="web" /> <label for="web">Website</label> </p> <p class="text"> <textarea name="text"></textarea> </p> <p class="submit"> <input type="submit" value="Send" /> </p> </form>
let's take a look at our form first without any CSS.
Ok let's include the css into HTML, yes we need to link each others:
we need to add linking url into the code at the top and betwin head tags:
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
It's SHOW TIME: CSS PART
Let's change style of text fields and text areas, with this codes:
input, textarea {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 200px;
background: #FFFFFF;
}
textarea {
width: 400px;
max-width: 400px;
height: 150px;
line-height: 150%;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
}
.form label {
margin-left: 10px;
color: #999999;
}
.submit input {
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
}
Now it's looks nice.
Save the work and don't miss the next tutorial:
PS: Next lesson will be about how to make this HTML/CSS form sending emails, so don't miss that up and don't lose this work.
Any suggestion leave me a comment or a message.
0 Comments:
Post a Comment
Thank for leaving a comment