CSS is a fairly simple language. Much of it has been discussed in Part I, but there are a few other details. We will also use CSS to stylize the login page.
As has been discussed, CSS consists of a selector, a pair of braces, and a list of properties. The selector can begin with:
nothing—this modifies the CSS of every element of the specified type in the document
a dot—this signals a class definition. A class can be used to apply a group of effects to the element using it.
a # sign—this signals an element id. It applies the specified effects to the element with a matching id.
Following the selector is a list of properties, which consist of a property name, a colon, and the value of the property. The properties come between braces {} and end with semicolons. Some CSS properties include: border; background image, color, or gradient; font color, size, or family; and can even keep an element at the corner of the viewport despite the scroll position.
A further detail is that CSS element selectors can be applied to an element only if it is within another element. For example, we would apply effects to any button in a form, we would use
form button {
//some stuff
}
Now we will use CSS to stylize our login page.
Right now, our login page is a rather simple affair, consisting of two input fields and their labels and a button. We will use CSS to stylize the page and make it look more attractive.
<head>
<meta charset="UTF-8">
<title>Log In</title>
<!-- Set the text displayed as the tab name -->
<style>
//We use a <style> tag to embed CSS code directly into the document without having to link to an external CSS file
button {
color: #212529;
background-color: transparent;
border: 1px solid transparent;
font-size: 16pt;
border-radius: 5px;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
//This is some complicated CSS, but I will list its effects in order:
/* The text color of the button is set to a very dark blue-gray
*The button's background color is made transparent
*The border is set to a transparent, 1-pixel, solid line
*The font size is set to 16 points
*The edges are rounded
*The button's transition when clicked is set
*/
}
.heading {
color: darkgreen;
background-color: rgba(255, 255, 255, 0.25);
//set the RGB color of the element, and set the opacity to 0.25
font-family: Avenir;
}
body {
background-color: darkgray;
}
input {
border-radius: 5px;
border: 1px solid black;
}
#username:hover {
//when someone hovers over the username field...
border: 2px solid darkcyan;
opacity: 0.5;
}
#password:hover {
//Same for the password field
border: 2px solid cadetblue;
opacity: 0.5;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td></td>
<td>
<img src="your image URL" width="200">
</td>
<td></td>
</tr>
</tbody>
</table>
<form action="validate.php" method="post">
<label class="heading" for=“username”>Username:</label>
<input id=“username” name=“username” placeholder="Username">
<!-- Set the placeholder of the element -->
<label class="heading" for=“password”>Password:</label>
<input type=“password” id=“password” name=“password” placeholder="Password">
<button>Log In</button>
</body>
Now our login page looks much more attractive. Next, we will build a homepage, where the user will be sent after logging in successfully. As a note, the homepage will be written in a PHP type file, allowing for embedded PHP script, which may be added later.
__RESOURCES__
http://www.minecaptain.com —My Website
A blank HTML file —Experiment!
A blank PHP file —May soon be useful...
Comments