Adding CSS3 and HTML5 to a Login Request Page

Introduction

The goal is to demonstrate the process to start with a login request page and add some CSS3 and HTML5 formatting to a web page.  

Tutorial for adding CSS3

1. Here is the starter page we are working with:

 

  

2. We want to start by adding a CSS3 style tag to the web form in the section:

     <style type="text/css">

        .Form {

            border-style: solid;

            border-color: inherit;

            border-width: 2px;

            POSITION: inherit;

            left: 50px;

            top: 50px;

            background-color: lightblue;

            width: auto;

            height: auto;

            /*New in CSS3*/

            border-radius: 5px;

            margin-top: 100px;

        }

    </style>

3. Apply the form style to the

tag by adding the class="Form" attribute.

3. Upon completion you can then view the results in the browser by right clicking in the code and choosing "View in Browser". 

4. You should now see the style added:

 

 5. You can also add styles for the label:

     <style>

        .Form {

                border-style: solid;

                border-color: inherit;

                border-width: 2px;

                POSITION: inherit;

                left: 50px;

                top: 50px;

                background-color: lightblue;

                width: auto;

                height: auto;

                /*New in CSS3*/

                border-radius: 5px;

                margin-top: 100px;

         }

        .Label {

            margin-left: 10px;

        }

     </style>

 6. Now update the label control to use the new style:

<asp:Label class="Label" ID="LabelName" runat="server" Text="Name"></asp:Label>

 <asp:TextBox class="TextBox" ID="TextBoxName" runat="server" CssClass="TextBox"></asp:TextBox>

<br />

<asp:Label class="Label" ID="LabelEmailAddress" runat="server" Text="EmailAddress"></asp:Label>

 <asp:TextBox ID="TextBoxEmailAddress" runat="server"></asp:TextBox>

<br />

<asp:Label class="Label" ID="LabelLoginName" runat="server" Text="LoginName"></asp:Label>

 <asp:TextBox  ID="TextBoxLoginName" runat="server"></asp:TextBox>

<br />

<asp:Label class="Label" ID="LabelReason" runat="server" Text="Reason for access?"></asp:Label>

 <br />

  

7. View the results in the browser:

 

8. Let's update the style for the textboxes:

.TextBox {

            border: 2px solid;

            width: 150px;

            margin-left: 5px;

            margin-right: 5px;

            border-radius: 05px;

            align-self:flex-end;

        }

 

9.  Add the add the new class to the the textbox controls:

<asp:Label class="Label" ID="LabelName" runat="server" Text="Name"></asp:Label>

 <asp:TextBox class="TextBox" ID="TextBoxName" runat="server" CssClass="TextBox"></asp:TextBox>

<br />

<asp:Label  class="Label" ID="LabelEmailAddress" runat="server" Text="EmailAddress"></asp:Label>

 <asp:TextBox class="TextBox" ID="TextBoxEmailAddress" runat="server"></asp:TextBox>

<br />

<asp:Label  class="Label" ID="LabelLoginName" runat="server" Text="LoginName"></asp:Label>

 <asp:TextBox class="TextBox" ID="TextBoxLoginName" runat="server"></asp:TextBox>

<br />

<asp:Label  class="Label" ID="LabelReason" runat="server" Text="Reason for access?"></asp:Label>

 <br />

<asp:TextBox class="TextBox" ID="TextBoxReason" runat="server" Height="161px" Width="553px"></asp:TextBox>

10. View the results in the browser:

 

11. Now we can add the style for the button:

.Button {

             align-items:center;

             margin-left: 40px;

             background-color: lightgreen;

         }

12. Add the style to the button control:

<asp:Button class="Button" ID="Button1" runat="server" Text="Request Login" Width="203px" OnClick="Button1_Click" />

 

13. Test the results in the browser:

 

Tutorial for adding HTML5

14. Let's now move the ASP named "LabelInfo" from the

area to the footer section as shown below:

            <asp:Button class="Button" ID="Button1" runat="server" Text="Request Login" Width="203px" OnClick="Button1_Click" />

            <br />

            <br />

           <%-- Move the LabelInfo to the footer section below >--%>

        </div>

    </div>

    <footer>

        <br />

        <br />

        <p>

             <asp:Label ID="LabelInfo" runat="server" Text="A Password will be sent to you once a staff member has manually gone over your request."></asp:Label>

        </p>

    </footer>

    </form>

 

15. You can now view the results in the browser: