Styling a php echo form with css - php

Question

In my php below i have a forgot password thing and it echo's a form depending on certain conditions how would i style this with my css? because i do not want the forms showing up without any styling
I have tried and tried to figure out what to do but there has been nothing. i even tried thinking about making this into a few serate pages but got confused and lost
<?php
require("core/dbc.php");
if(isset($_GET['code']))
{
$get_username = $_GET['username'];
$get_code = $_GET['code'];
$query = mysql_query("SELECT * FROM users WHERE username='$get_username'");
while($row = mysql_fetch_assoc($query))
{
$db_code = $row['passreset'];
$db_username = $row['username'];
}
if($get_username == $db_username && $get_code == $db_code)
{
echo "
<form action='pass_reset_complete.php?code=$get_code' method='POST'>
Enter A New Password<br><input type='password' name='newpass'><br>
Re-Enter Your New Password<br><input type='password' name='newpass1'><p>
<input type='hidden' name='username' value='$db_username'>
<input type='submit' value='Update Password'>
</form>
";
}
}
if(!isset($_GET['code']))
{
echo "
<form action='forgot_pass.php' method='POST'>
Enter Your Username<br><input type='text' name='username'><p>
Enter your email<br><input type='text' name='email'><p>
<input type='submit' value='Submit' name='submit'>
</form>
";
if(isset($_POST['submit']))
{
$username = $_POST['username'];
$email = $_POST['email'];
$query = mysql_query("SELECT * FROM users WHERE username='$username'");
$numrow = mysql_num_rows($query);
if($numrow!=0)
{
while($row = mysql_fetch_assoc($query))
{
$db_email = $row['email'];
}
if($email == $db_email)
{
$code = rand(10000,1000000);
$to = $db_email;
$subject = "Password Reset";
$body = "
This is a automated email. PLEASE DO NOT REPLY TO THIS MESSAGE
Click the link below or paste it into your browser
http://localhost:8080/signup-project/signup-project/registration%20and%20login/forgot_pass.php?code=$code&username=$username
";
mysql_query("UPDATE users SET passreset='$code' WHERE username='$username'");
mail($to,$subject,$body);
echo "Check Your Email For Your New Password";
}
else
{
echo "the email is incorrect";
}
}
else
{
echo "that username does not exist";
}
}
}
?>
Ok i am confused because a lot of people are saying different ways so let me try this i am going to put my css file code then i am going to paste my log in form code (where i have this css working'
this is the code from my .css file
body {
line-height: 1.4;
background-color: #666;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
}
.hidden {
display: none;
}
a,
a:active,
a:focus
a:visited {
color: #1B9BE0 ;
text-decoration: none;
}
a:hover {
text-decoration: underline
}
/* Structure */
#wrap {
width: 960px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
-webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
}
#head {
text-align: center;
}
.form-wrap {
width: 600px;
margin: 0 auto;
}
.content {
overflow: hidden;
}
.user-controls {
float: right;
}
.logged-in-user{
float: right;
margin-left: 140px;
}
.logged-in-user p {
margin: 0;
}
/* Form Elements */
fieldset {
border: 0;
padding: 0;
}
.form-el {
margin: 10px 0;
}
.btn {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
input[type="text"],
input[type="number"],
input[type="password"],
textarea {
background-color: #fff;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear .2s,box-shadow linear .2s;
-moz-transition: border linear .2s,box-shadow linear .2s;
-o-transition: border linear .2s,box-shadow linear .2s;
transition: border linear .2s,box-shadow linear .2s;
padding: 8px 4px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 270px;
font-size: 18px;
}
input[type="text"]:hover,
input[type="number"] :hover,
input[type="password"]:hover {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted 9;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
input[type="submit"] {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #006dcc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
background-repeat: repeat-x;
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
Now this is my login form that has the css on it
<html>
<head>
<meta charset="utf-8">
<title>Log-In</title>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'/>
<link href="../css/core.css" rel="stylesheet" />
</head>
<body>
<div id="wrap">
<div id="head">
<h1>Login to the Assignment Upload System</h1>
</div>
<div class="content">
<form action="core/authenticate.php" method="POST">
<div class="form-wrap">
<fieldset>
<legend class="hidden">Login</legend>
<div class="form-el">
<label class="hidden" for="username">User name</label>
<input id="username" type="text" name="username" placeholder="Enter Your Username..."><br />
</div>
<div class="form-el">
<label class="hidden" for="password">Password</label>
<input id="password" type="password" name="password" placeholder="Enter Your Password..."><br />
Forgot Password?
</div>
<input class="btn" type="submit" value="Login">
</fieldset>
</div>
</form>
</div>
<?php if(isset($_GET["feedback"])){echo $_GET["feedback"];} ?>
</div>
</body>
</html>
Now i want my echo form in my php to look exactly like this page so how would i do this? because i am getting really confused with what people are saying

Answer 1

an easy way is to include bootstrap:
include this in the <head>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" media="screen" />
then in all your inputs add class="form-control"
for example:
<input type="text" class="form-control" />

Answer 2

Just make sure you include your CSS file in the HTML file you are generating with your PHP Code.
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

Answer 3

give the form a class name like this:
echo "
<form action='pass_reset_complete.php?code=$get_code' method='POST' class='first_form'>
Enter A New Password...etc
then add style tag but out of the PHP codes:
<style>
.first_form{
background:#ccc;
width:300px;
border:solid #000 1px;
}
</style>
and you can styling input tags in the form like this:
<style>
.first_form{
background:#ccc;
width:300px;
border:solid #000 1px;
}
.first_form > input[type=password]{
width:250px;
color:#fff;
background:#333;
}
.first_form > input[type=submit]{
width:70px;
border:none;
}
</style>