First Login Form CSS(Websters,TSG)

body
{
    background-color: rgb(192,192,192);
    /*
    this attribute describes background color of an element(body here). As we told you before also, there are three methods by which you can define color/background-color. For eg.

    METHOD 1
    background-color: white;
    background-color: grey;
    // for common colors only

    METHOD 2
    background-color: rgb(192,192,192);
    RGB format defines the concentration of Red, Blue and Green. values : 0 to 255;
    background-color: rgb(255,0,0); // Pure Red
    background-color: rgb(0,255,0); // Pure Green
    background-color: rgb(0,0,255); // Pure Blue
    background-color: rgb(0,0,0); // Pure Black
    background-color: rgb(255,255,255); // Pure White

    METHOD 3
    background-color: #FFFFF;
    Here after '#' we write hex code of the color. We can convert a color from RGB form to hexcode and vice versa. Hexcode is just representation of R,G and B in hexadecimal form.

    background-color: #FFFFFF; (or RGB 255,255,255 or white)
    background-color: #FF0000; (RED)
    background-color: #00FF00; (GREEN)
    background-color: #0000FF; (BLUE)
    */

    font-family: "Open sans";
    /*
    The name of the font, this is same as that font which we included as a "link" tag in HTML file
    */

}
.main
{
    margin: 200px auto 20px auto;
    /* Top  :200px, left : auto, bottom:20px, right:auto; */

    width: 400px;
    /* width of div in pixels */
}
.lockIcon
{
    width: 32px;
    height: 26px;
    /* Width and height of image, no rocket science */
}
.signin
{
    margin-left: 10px;
    /* Margin left to the "left" side */
    font-size: 32px;
    /* size of font */
}
.upperPane
{
    background-color: rgb(250,82,82);

    padding : 15px;
    /* Padding : inner space. Change this value to see effect if you are still confused between padding and margin */

    color: white;
    /*Color of text is defined by this property */

    font-family: inherit;
    /* Inherit means it "inherits" the font name from its parent, i.e. font-family here is "Open Sans" */
    font-size: 28px;

    border-top-right-radius:20px;
    border-top-left-radius:20px;
    /* Border radius property defines the curveness of an element. You can notice that our "div" is curved from all 4 sides. But all 4 sides do not belong to one div.
    Two sides belong to "upperPane" and other two to "lowerPane". So we separately set border radius (curveness) for each of the four sides; two in upperPane (top-right and top-left) and the other two in lowerPane (bottom-right and bottom-left)*/
}
.lowerPane
{
    background-color: white;
    padding: 20px;
    border-bottom-right-radius:20px;
    border-bottom-left-radius:20px;
    /* Explained at some or other point above */
}
.email, .pass
{
    color: gray;
    margin-bottom: 15px;
}
input
{
    font-size: 24px;
    font-family: inherit;
    display: block;
    margin-bottom: 15px;
}
.textbox
{
    width: 100%;
    border: 0px solid white;
    /* This is the syntax to give border to an element. First argument defines the thickness of border in px (pixels). Second defines the type of border (solid, dashed,etc). Third defines the color. RGB and Hex forms are also allowed here*/
    background-color: rgb(238,238,238);
}
.submit
{
    background-color: #2CD777;
    font-family: inherit;
    font-size: 20px;
    margin: 0 auto;
    padding: 5px 25px 5px 25px;
    color: white;
    border: 0px solid white;
    border-radius: 10px;
}
/* All the colors were picked from the image using a "color picker" tool. You can also use your own color picker tool or the one given by us to pick colors from images

HTML is overall case-insensitive (HTML and html mean the same) but it is recommended to use one case otherwise you may end up confusing yourself

CSS is overall case-sensitive (main and MAIN mean different). However values inside qoutes (like font-names) and hexcodes are case-insensitive (#2cd777 and 2CD777 mean same) */