Hi,
in this tutorial i want you to all understand the use of classes for html/css
what does a class do?
making use of a "class" in html code makes it possible to personalize certain styles of basic html looks.
let me show you what a class can do to your styling.
lets make a form that will be used to login.
a standard form will look like this:
basic html code:
Code:
<form method="POST" action="http://localhost:81/login/login.php">
Username <input type="text" name="username" size="15"/>
Password <input type="password" name="passwort" size="15" />
<input type="submit" name="mysubmit" value="login"></br>
this doesnt look nice at all so what we're gonna do next is add a class to our basic html code for our form
Code:
<form method="POST" action="http://localhost:81/login/login.php">
Username <input type="text" class="form" name="username" size="15"/>
Password <input type="password" class="form" name="passwort" size="15" />
<input type="submit" name="mysubmit" value="login"></br>
</form>
what we did here is adding a class called "form" so now our html code will search for the css code called "form"
in our css document.
so lets make a css class called "form" and add some syling to it
Code:
.form {
border: 1px solid;
margin: auto;
width: 10%;
border-radius: 5px;
-moz-border-radius: 5px;
background: #E6E6E6;
font-family: Bebas Neue;
color: grey;
outline:none;
}
so now our form will look like this:
what happend here is simple, our css code changed the looks of our form by adding the css class to the html class called "form"
now lets add some effect to it when hovering over
we're gonna keep the effect simple by just adding a drop-shadow
so lets go back to our css document
Code:
.form:hover {
border: 1px solid;
margin: auto;
width: 10%;
border-radius: 5px;
-moz-border-radius: 5px;
background: #E6E6E6;
font-family: Bebas Neue;
color: grey;
box-shadow: 0px 0px 5px grey;
}
.form:active {
position:relative;
top:1px;
}
what this will do is making it look like this
when hovering over
now thats done lets add a different look to that ugly login button:
again go into the html code and add a class called "button" to our login button code
Code:
<form method="POST" action="http://localhost:81/login/login.php">
Username <input type="text" class="form" name="username" size="15"/>
Password <input type="password" class="form" name="passwort" size="15" />
<input type="submit" class="button" name="mysubmit" value="login"></br>
</form>
now thats done for the html part lets head back to our css document and make a class called "button" in it
Code:
.button {
border: 1px solid;
margin: auto;
width: 5%;
border-radius: 5px;
-moz-border-radius: 5px;
background: #E6E6E6;
font-family: Bebas Neue;
color: grey;
outline:none;
}
this will make it look like this:
and finally lets add a hover effect to our button aswell
Code:
.button:hover {
border: 1px solid;
margin: auto;
width: 5%;
border-radius: 5px;
-moz-border-radius: 5px;
background: #E6E6E6;
font-family: Bebas Neue;
color: grey;
box-shadow: 0px 0px 5px grey;
}
.button:active {
position:relative;
top:1px;
}
this is how it will look when we hover over our login button:
complete css code
Code:
.button {
border: 1px solid;
margin: auto;
width: 5%;
border-radius: 5px;
-moz-border-radius: 5px;
background: #E6E6E6;
font-family: Bebas Neue;
color: grey;
outline:none;
}
.button:hover {
border: 1px solid;
margin: auto;
width: 5%;
border-radius: 5px;
-moz-border-radius: 5px;
background: #E6E6E6;
font-family: Bebas Neue;
color: grey;
box-shadow: 0px 0px 5px grey;
}
.button:active {
position:relative;
top:1px;
}
.form {
border: 1px solid;
margin: auto;
width: 10%;
border-radius: 5px;
-moz-border-radius: 5px;
background: #E6E6E6;
font-family: Bebas Neue;
color: grey;
outline:none;
}
.form:hover {
border: 1px solid;
margin: auto;
width: 10%;
border-radius: 5px;
-moz-border-radius: 5px;
background: #E6E6E6;
font-family: Bebas Neue;
color: grey;
box-shadow: 0px 0px 5px grey;
}
.form:active {
position:relative;
top:1px;
}
complete html code:
Code:
<form method="POST" action="http://localhost:81/login/login.php">
Username <input type="text" class="form" name="username" size="15"/>
Password <input type="password" class="form" name="passwort" size="15" />
<input type="submit" class="button" name="mysubmit" value="login"></br>
</form>
i hope this helped
oh btw dont mind the
Code:
"http://localhost:81/login/login.php"
code all this does is make it listen to my login.php document telling it to activate the login option