Adding Space Between Table Cells

The first thing we are going to change is space out the text in the page, so add a new style to the Contentstore.css file in order to add some padding to each cell in the table that lists the categories:

td { padding: 5px; }

The effect of this new class is shown in Figure 16-2.

Figure 16-2. The categories list now spread out

Styling the Links

We want the admin links to have a different font-weight than the normal category links. To achieve this, we are going to use the existing large-bold-text class to style these links, but we are also going to make the category links the same size but not bold. Add the following class to store.css:

.large-text { font-size: 1.5em; }

Now to use this new style and style the other links to create, edit, and delete categories, modify the ViewsCategoriesIndex.cshtml file as follows to apply the large-text and large-text-bold classes. Also remove the code that generates the first line of the table that outputs the text "Category Name":

<h2>@ViewBag.Title</h2>

@if (Request.IsAuthenticated && User.IsInRole("Admin"))
{
    <p class="large-bold-text">
        @Html.ActionLink("Create New", "Create")
    </p>
}
<table class="table">                  
    @foreach (var item in Model)              
    {
        <tr>
            <td class="large-text">
                @Html.ActionLink(item.Name, "Index", "Products", new { category = item.Name },
                null)
            </td>
            <td class="large-bold-text">
                @if (Request.IsAuthenticated && User.IsInRole("Admin"))
                {
                    @Html.ActionLink("Edit", "Edit", new { id = item.ID })
                    @Html.Raw(" | ")
                    @Html.ActionLink("Delete", "Delete", new { id = item.ID })
                }
            </td>
        </tr>
    }
</table>

Figure 16-3 shows how the updated page now appears to an admin user and Figure 16-4 shows how it appears to a normal user.

Figure 16-3. The modified categories index page when logged in as an admin user

Figure 16-4. The appearance of the categories index page to a non-admin user

Adding Vertical Space Using Margins

First off, we are going to add some spacing between the text box and the Save button. Each of these is contained inside a div with the class form-group assigned. To add some space between them, add the following style to the Contentstore.css file to add a bottom margin to the form-group class:

.form-group{ margin-bottom: 10px; }

The Back to List link at the bottom of the form is also touching the footer, which looks a little out of place, so add a top margin to the footer as follows:

footer {
    margin-bottom: 20px;
    background-color:deepskyblue;
    color: white;
    height: 30px;
    line-height: 30px;
    padding:5px;
    border-radius:5px;
    margin-top:10px;            
}

The effect of these changes is to add some vertical spacing to the form, as shown in Figure 16-6. Note that the changes have also affected the search box and button in the navigation bar. We will override these later in the book when styling this section of the site.

Figure 16-6. The form with vertical spacing added to it

Adding a Grid Layout

In the previous chapter, we added a style for the col-md-3 class, assigning it a width property with a value of 25% and floating to the left of following content. This form contains two other column classes so it’s now a good point to add some styles for the other possible column classes used in the site. As mentioned in the previous chapter, Bootstrap uses a 12-column grid layout so we are going to add styles for a simple grid system.

To start, add some width styles for each available column width by adding the following to the store.css file:

.col-md-1 { width: 8.333333333333332%; }
.col-md-2 { width: 16.666666666666664%; }
.col-md-3 { width: 25%; }
.col-md-4 { width: 33.33333333333333%; }
.col-md-5 { width: 41.66666666666667%; }
.col-md-6 { width: 50%; }
.col-md-7 { width: 58.333333333333336%; }
.col-md-8 { width: 66.66666666666666%; }
.col-md-9 { width: 75%; }
.col-md-10 { width: 83.33333333333334%; }
.col-md-11 { width: 91.66666666666666%; }
.col-md-12 { width: 100%; }

Each percentage is worked out by dividing the total number of columns (12) by the number included in the style, e.g., col-md-2 has a width of 2/12. Note that these are the same widths as you will find in the Bootstrap.css file.

In order to make the column styles appear as columns, they need to be floated to the left, so add the following style to accomplish this:

.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11 {
float: left;
}

Next, remove the original style that was previously added for col-md-3, as it is now redundant.

This has now assigned a width to the elements in the form and floated the Category Name text to the left of the text box. You can see the effect of these changes in Figure 16-7.

Figure 16-7. The form with styles added for all column widths. The Category Name text and the input box now float next to one another.

There is an issue with the form in that the Back to List link is now out of position on a wide screen. To fix this, we need to apply the same fix as in Chapter 15 to apply a clear after the form-group class (this contains the Save button). Update the existing style that fixes this issue in store.css as follows:

.row:after, .form-group:after {
  content: " ";
  display: table;
  clear: both;
}

Styling Labels and Text Boxes

Make the label element bold in appearance, with a margin of five pixels above it to align it better with the element it refers to and set the display to inline-block so that the margin-top property can take effect by adding the following style:

label {
    font-weight: bold;
    margin-top: 5px;
    display: inline-block;
}

Next, update the text box to appear with blue text and a blue border with rounded corners by adding the following style:

.form-control {
    width: 100%;
    max-width: 250px;
    border-radius: 3px;
    border: solid deepskyblue;
    color: rgb(14, 117, 204);
}

The width settings for the form-control class are different from those used before and the width property is set to 100% to allow the element with this class applied. However, the max-width property limits the element to a maximum of 250 pixels.

The page will now appear as shown in Figure 16-8. The float issue has been fixed, plus the label is bold, the text box now has a rounded deepskyblue border and the text Category Name is vertically aligned with it.

Figure 16-8. The effect of the updated label and text box styles

Revisiting the Grid System: Adding Blank Columns Using Margins

Previously, we added a very basic column system and we are now going to add some styles to address the scenario where we want to add an empty column to the left of another column.

Currently the Save button is located to the left of the page; we are going to show you how to relocate it to be underneath the text box. The HTML that renders the button is as follows:

<div class="col-md-offset-2 col-md-10">
    <input type="submit" value="Save" class="btn btn-default">
</div>

In the Bootstrap CSS, the class col-md-offset-2 is used to add a blank column to the left of the button. In order to replicate this, add the following style to the store.css file:

.col-md-offset-2 {
    margin-left: 16.666666666666664%;
}

This will now move the button over to the right by the equivalent of two column widths and add a left margin, as shown in Figure 16-9.

Figure 16-9. Utilizing a margin to add the effect of an empty column

For completeness, update store.css to add more offset styles to each column width as follows:

.col-md-offset-0 { margin-left: 0; }
.col-md-offset-1 { margin-left: 8.333333333333332%; }
.col-md-offset-2 { margin-left: 16.666666666666664%; }
.col-md-offset-3 { margin-left: 25%; }
.col-md-offset-4 { margin-left: 33.33333333333333%; }
.col-md-offset-5 { margin-left: 41.66666666666667%; }
.col-md-offset-6 { margin-left: 50%; }
.col-md-offset-7 { margin-left: 58.333333333333336%; }
.col-md-offset-8 { margin-left: 66.66666666666666%; }
.col-md-offset-9 { margin-left: 75%; }
.col-md-offset-10 { margin-left: 83.33333333333334%; }
.col-md-offset-11 { margin-left: 91.66666666666666%; }

To complete this page, we are going to update the button so it behaves the same as the Shop Now button on the home page.

Styling Buttons

In the previous chapter, we added some styles to allow a hyperlink to have the appearance of a button. Now we are going to reuse these styles to add the same appearance as any normal button input with the classes btn and default-btn. To update the button used in the form, update the styles relating to a.btn and a.btn-primary as follows:

a.btn, .btn {
    border-radius: 5px;
    color: #ffffff;
    text-decoration: none;
    border: 2px outset buttonface;
}

a.btn-primary, .btn-default, .btn-primary { background-color: lawngreen;}

a.btn-primary:hover, .btn-default:hover, .btn-primary:hover { background-color: green; }

a.btn-lg{
    padding: 10px 16px;
    font-size:1.5em;
}

These styles now apply to normal buttons styled with the classes .btn and .btn-default. The form will now be updated, as shown in Figure 16-10 with an updated Save button. The search button in the navigation bar has also been restyled.

Figure 16-10. The restyled Save button

Styling the Cursor

The form looks pretty good now, but we want to make the cursor behave consistently when using actual buttons or links that appear as buttons. When a user hovers over a link, the cursor changes to a hand and I am going to show you how to replicate this when a user hovers over any button in the site. This is relatively straightforward but I’ve made a point of giving it a small section in the book because it is not obvious that you can change it. To change the cursor style to a hand whenever a user hovers over any submit button (not just one with the a.btn or .btn class applied), add the following style to the stylesheet:

input[type=submit]:hover {
    cursor: pointer;
}

Styling Error Messages

The form looks pretty complete now, but there is still one element that we want to restyle; the error messages that appear when the form fails validation. Figure 16-11 shows the Category Edit page with an error message.

Figure 16-11. The default formatting of an error message

We are going to restyle the error messages to be bold, red, and also appear underneath the text box rather than next to it. The HTML that generates the text box and the error message is as follows, I’ve highlighted the relevant classes we are going to style in bold:

<div class="col-md-10">
    <input class="form-control text-box single-line input-validation-error" data-val="true"      
        data-val-length="Please enter a category name between 3 and 50 characters in length"  
        data-val-length-max="50" data-val-length-min="3" data-val-regex="Please enter a
        category name beginning with a capital letter and made up of letters and spaces only"  
        data-val-regex-pattern="^[A-Z]+[a-zA-Z''-'s]*$" data-val-required="The category name  
        cannot be blank" id="Name" name="Name" type="text" value="Clothes">
    <span class="text-danger field-validation-error" data-valmsg-for="Name" data-valmsg-
    replace="true">
        <span for="Name" class="">Please enter a category name beginning with a capital letter
        and made up of letters and spaces only</span>
    </span>
</div>

First, add a simple style to store.css for the text-danger class to format it as red with bold text, as follows:

.text-danger {
    color: red;
    font-weight: bold;
}

If you view the web page, it should now be updated with the error message in bold red text. Next, we are going to shift the error message underneath the text box by using the display property.

Changing the Flow of the Page Using the Display Property

In the introduction to CSS, we mentioned the inline and block elements. Block elements add a line break after, them while inline elements flow in line with each other. At the moment, both the text box and the span that follows it are inline elements. We are going to change the behavior of the form-control class so that a line break is added after the text box, therefore forcing the error message to appear below it. To achieve this, update the form-control style as follows:

.form-control {
    width: 250px;
    border-radius: 3px;
    border: solid deepskyblue;
    color: rgb(14, 117, 204);
    display: block;              
}

The error message will now appear on a new line, as shown in Figure 16-12.

Figure 16-12. The restyled error message appearing on a new line

This form looks good, so let’s check the effect on the other HTML forms of the site.

Forcing Inheritance

The textarea element for entering the description has a different font to the rest of the page. In fact, this brings up an interesting feature of CSS in that the font used in all form elements, apart from the labels, all differ from the body font. Each of the form elements actually uses an Arial font with 13.3333px size, which is set by the browser’s default stylesheet. It just happens that I chose a font and font-size that made this look as though everything was being inherited correctly. To see what I mean, change the body style so that the font size is set to 20px as follows:

body {
    background-color: white;
    max-width: 1024px;
    margin: 0 auto;
    font-size: 20px;            
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(14, 117, 204);
}

Figure 16-14 shows the updated page highlighting the fact that the fonts in the text box, text area, select lists, and Submit button have all stayed the same and are different from the body.

Figure 16-14. The form element font is not the same as the body

To force these elements to all be the same font size and font weight as the body tag, use the inherit keyword by adding the following style to the store.css file:

input, textarea, select, button {
    font-family: inherit;
    font-size: inherit;
}

This now forces the text boxes, the text area, the select lists, and the Create button to inherit the fonts from the body tag. Note that the text boxes and Create button are styled by the input selector. Figure 16-15 shows the effect of forcing inheritance for these elements; all the controls in the form now use the same font style and size.

Figure 16-15. The form elements now inherit the same font as the other elements contained inside the body tag

Change the font-size of the body style back to 12px:

body {
    background-color: white;
    max-width: 1024px;
    margin: 0 auto;
    font-size: 12px;            
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(14, 117, 204);
}

Aligning Text

There are a couple of alignment issues I mentioned earlier—the labels don’t read very well when left aligned, so we are going to right align them next to each element they relate to, plus the text boxes, text area, and select controls all have the different widths. First of all, to right-align any labels that are used in a form, add a style that targets the control-label class as follows:

.control-label {
    text-align: right;
}

The form now appears as shown in Figure 16-16.

Figure 16-16. The effect of using text-align: right on the .control-label class

You can see that the text is right-aligned as expected but that it is tight against each control. To add some spacing, we are going to add some padding to the right of the column styles because it’s likely that this may affect other items of text contained in columns throughout the site. Add the following entry to the style that floats the columns:

.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11 {
float: left;
padding-right: 5px;                
}

This looks like it should work fine but it does not, as shown in Figure 16-17.

Figure 16-17. Applying a padding to the column styles makes the form move out of alignment

Box-Sizing

This issue is caused by the way the browser calculates widths. By default, it calculates widths as the width of the element plus any padding or margins, so in effect it is now trying to create a col-md-2 element that is 16.666666666666664% of the page, plus five pixels in width. Remember the HTML for the label plus the code is as follows:

<div class="form-group">
    <label class="control-label col-md-2" for="Name">Name</label>
    <div class="col-md-10">
        <input class="form-control text-box single-line" data-val="true" data-val-
            length="Please enter a product name between 3 and 50 characters in length" data-
            val-length-max="50" data-val-length-min="3" data-val-regex="Please enter a product
            name made up of letters and numbers only" data-val-regex-pattern="^[a-zA-Z0-9'-
            's]*$" data-val-required="The product name cannot be blank" id="Name" name="Name"
            type="text" value="">
        <span class="field-validation-valid text-danger" data-valmsg-for="Name" data-valmsg-
            replace="true"></span>
    </div>
</div>

So based on this HTML, the browser is trying to place a label with a class of col-md-2 next to a div with a class of col-md-2. To the browser this now says to display something that is 16.666666666666664% of the page plus five pixels in width next to something that is 83.33333333333334% of the width of the page. That means the browser is trying to display something that is 100% of the page width plus fixe pixels, which it simply cannot do. So the two elements now appear on different lines. For proof of this, change the width of the col-md-10 class as follows:

.col-md-10 { width: 75%; }

The page now appears as shown in Figure 16-18, with everything aligned correctly.

Figure 16-18. The effect of shortening the width of col-md-10

Following this, reset the col-md-10 styles width back to its original value as follows:

.col-md-10 { width: 83.33333333333334%; }

Clearly, we can’t start altering the widths in the stylesheet for each column depending on what padding we use in other columns, so to fix this issue we need to use a CSS property known as box-sizing. There are three options for the value of the box-sizing property as follows:

• Content-box is the default way browsers calculate width and height. The browser adds the border widths and padding thicknesses to the values set for the width and height properties to calculate an element’s full width and height.

• Padding-box includes the padding as part of the height and width. For example, if you give an element 10 pixels of padding and set the width of the element to 50 pixels, the browser will consider the padding part of the 50 pixels and the content area would only be 30 pixels in width (i.e., 50-10-10). Padding-box is a legacy setting and is hardly ever used; it has been removed from the latest CSS specification, although it is currently supported in Firefox.

• Border-box includes the padding and the border thickness as part of the width and height values. This setting solves the problem of using percentage values for widths combined with padding. For example, with box-sizing set to border-box, when you set an element’s width to 30%, that element will take up 30 percent of the available width even if you add padding and borders.

To solve the issue in Figure 16-17, we are going to set the box-sizing property to border-box. This is a setting that it is often included as a wildcard setting and applied to everything. Because this is such a useful setting, we are going to add it to the Content eset.css file. Update this file to add the following entry:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

This now ensures that the padding is included in the width of each column element and the Product Create page now appears as shown in Figure 16-19. Note that it has been necessary to include some browser-specific versions of the box-sizing property in order to support Chrome and Firefox.

Figure 16-19. Using box-sizing: border-box allows padding to be used to add spacing between the label and text boxes

footer {
    margin-bottom: 20px;
    background-color: deepskyblue;
    color: white;
    height: 30px;
    line-height: 20px;              
    padding:5px;
    border-radius:5px;
    margin-top:10px;
}

Vertically Aligning Something with Another Element Containing Text

If you now log out of the site and click on the Log In link, you will see the page shown in Figure 16-20.

Figure 16-20. The log in page

There are a couple of issues with this page, the H4 heading needs tidying up a bit to make the font larger and to add some space between the Use a Local Account to Log In text and the E-mail label and text box. Add a simple style to store.css to fix this as follows:

h4{
    font-size: 1.5em;
    margin-bottom: 5px;
}

There is one other issue on the page that you may not have spotted. The checkbox next to the Remember Me? link is not vertically aligned with the text. To vertically align these two elements, you might think that you would try to vertically align the text with the checkbox; however, in CSS this works the other way round. You must align the checkbox correctly. To vertically align the checkbox, add the following style to the store.css file:

input[type=checkbox] {
    vertical-align: middle;
}

This will vertically align the checkbox with the text next to it; the effect of these two changes is shown in Figure 16-21.

Figure 16-21. The updated H4 heading and the vertically aligned checkbox