Styling the Footer

We’re going to start this chapter by introducing a few CSS concepts. We’ll add a new style for the footer to make it a deepskyblue color with rounded corners and white text rather than the standard blue added to the body in the previous chapter.

To start restyling the footer, add a new footer style to the Contentstore.css file as follows:

footer {
    margin-bottom: 20px;
    background-color:deepskyblue;
    color: white;
}

This will add a blue background to the footer and set the text to white. The margin-bottom property adds a space under the footer so that you can more easily see the footer in the figures. The footer will now appear as shown in Figure 15-1.

Figure 15-1. The footer with a sky blue background and white text

Using Line Height to Vertically Align Text

Now set the height of the footer to 30 pixels by updating the style as follows:

footer {
    margin-bottom: 20px;
    background-color:deepskyblue;
    color: white;1
    height: 30px;            
}

The footer now appears taller and takes up more room; however, the text is now aligned to the top edge of the footer, as shown in Figure 15-2.

Figure 15-2. The footer set to 30 pixels high with the text aligned to the top edge

We want the text to be aligned vertically in the center of the footer rather than along the top edge. To achieve this, add a line-height property and set the value to 30 pixels so it is the same height as the footer. Note that this approach works only with text that is a single line in height.

footer {
    margin-bottom: 20px;
    background-color:deepskyblue;
    color: white;
    height: 30px;
    line-height: 30px;            
}

The text will now be vertically aligned in the center of the footer, as shown in Figure 15-3.

Figure 15-3. The footer text now aligned in the center

We also don’t want the text aligned to the left edge, so we’re going to add a bit of padding to the footer so you can see the effect of this. It will extend the height of the footer, although the width will not change because the footer cannot break out of the containing body element. Update the footer style as follows to add five pixels of padding:

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

This is a prime example of the padding adding space around the text inside an element and making the element larger. It does not add space around the element. Figure 15-4 shows how the footer now appears.

Figure 15-4. The footer with padding applied; the text has now moved away from the left edge

Rounding Corners

To complete the footer, we are going to introduce a new property named border-radius. This is used to make square corners appear rounded. Each corner can be styled individually using the appropriately named property, e.g., border-top-left-radius, but in this example, we are going to keep things simple and style all the corners the same. Update the footer style to add a border-radius property as follows:

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

You can change the value for the border-radius property in order to make the corners more or less rounded. You can see the effect of adding border-radius to the footer in Figure 15-5.

Figure 15-5. The footer with rounded corners

Styling the Home Page Headings by Using Font Weights and em Values for Font-Size

We’re now going to style the headings in the page, i.e., the text "Welcome to the Baby Store" and "Here is a selection of our best selling products". These are generated using the <h1> and <h2> HTML tags so we are going to add some styles for those. We are going to style both of them the same to demonstrate applying the same style to multiple elements using a group selector. Add the following style to the stylesheet to restyle the h1 and h2 elements:

h1, h2 {
    color: hotpink;
    font-size:2em;
    font-weight: bold;
}

This will add change the h1 and h2 elements to use a pink color. Using em measurements for the font-size property will make the font-size twice the size of the font applied to the body element. The body element has the font-size set to 12px, so the h1 and h2 elements will have their sizes set to 24px. The font-weight has been set to bold in order to make the letters bold, but this property’s values can also be set using numeric values in increments of 100, from 100 to 900 (bold is equivalent to 700). The updated headings will now appear as shown in Figure 15-6.

Figure 15-6. The updated H1 and H2 styles

Introducing Float for Displaying Images Next to One Another

The float property can be used to position elements side by side and create columns on a web page. Setting the float property on an element moves it outside of the normal flow of the page. For example, it can be used to place divs side by side rather than stacked on top of each other, as you will now see.

The HTML that is used for displaying product images in the home page is as follows:

<div class="row">
    <div class="col-md-3">
        <a href="/Products/Details/6">
            <img src="/Content/ProductImages/Bibs1.JPG">
        </a>
        <p>
            <a href="/Products/Details/6">3 Pack of Bibs</a>
        </p>
    </div>
    <div class="col-md-3">
        <a href="/Products/Details/11">
            <img src="/Content/ProductImages/Pram1.JPG">
        </a>
        <p>
            <a href="/Products/Details/11">Black Pram and Pushchair System</a>
        </p>
    </div>
    <div class="col-md-3">
        <a href="/Products/Details/5">
            <img src="/Content/ProductImages/Bottles1.JPG">
        </a>
        <p>
            <a href="/Products/Details/5">3 Pack of Bottles</a>
        </p>
    </div>
    <div class="col-md-3">
        <a href="/Products/Details/3">
            <img src="/Content/ProductImages/Lion1.JPG">
        </a>
        <p>
            <a href="/Products/Details/3">Orange and Yellow Lion</a>
        </p>
    </div>
</div>

Each image is wrapped inside a div with a CSS class of col-md-3 applied to it. Therefore, you need to make these divs appear in a horizontal line rather than vertically stacking them. In order to make this happen, add a new entry to the Contentstore.css file as follows:

.col-md-3 {
    float: left;
}

This now floats each div with the class of col-md-3 to the left of whatever follows it. It sounds good and we now have the images next to one another; however, things are not quite that simple, as shown in Figure 15-7.

Figure 15-7. The effect of adding float: left to the col-md-3 class

Using Clear After a Floated Element

The Shop Now link and the footer are now out of place because the last col-md-3 div has floated to the left of everything that follows it. In order to fix this, we need a way to tell everything that follows the container of the floated elements to return to the normal page flow, rather than just following the floated elements. To achieve this, we are going to use code based on something known as the Micro Clearfix, created by Nicolas Gallagher. Add the following to the store.css file in order to stop everything after the row div from being floated:

.row:after {
  content: " ";
  display: table;
  clear: both;
}

Everything following the row div now returns to the normal flow of the page and the footer returns to its original position, as shown in Figure 15-8.

Figure 15-8. The effect of the Micro Clearfix on the home page

This code works by using the :after pseudo-class to apply the style to anything that appears after the row class. It sets the content immediately following the row element to a space and then uses the clear: both declaration to force the content to drop below any left or right floated elements. Clear is very useful when dealing with floats and can be used in isolation rather than as part of the Micro Clearfix code; for example, if we just wanted to clear the footer element we could use the style footer { clear: both }. However, by using a pseudo-class, we are able to ensure anything after a row always gets cleared.

Tip

Pseudo-classes are used for something that is not a tag but can be easily identified. There are several pseudo-classes that are related to styling links, which we will cover later, but other pseudo-classes that exist, including :hover, :before, :after, and ::selection. All of these have fairly self-explanatory names apart from ::selection, which is applied to text that users have selected by dragging their mouse over.

Styling the Images

The first thing we are going to do with the images is space them out a little. From the previous code listing, you can see that each image is contained inside a div with the class col-md-3, which is a column class the Bootstrap uses as part of its grid layout system. The standard bootstrap grid system consists of twelve columns and later we will replicate this in a simplified manner. However, the reason I am mentioning this here is this has implications for how wide the col-md-3 style should be.

To work out the width of the col-md-3 style, you divide the number of the column style, in this case 3, by the number of columns, i.e., 12 as a percentage. So in this case the col-md-3 style needs to have a width of 25%. To reflect this, update.col-md-3 in the Contentstore.css file to add a new width property as follows:

.col-md-3 {
    float: left;
    width: 25%;          
}

This will now space out the image elements, as shown in Figure 15-9.

Figure 15-9. The images now with space in between them

Add a small bottom margin to the h1 and h2 styles to add some space above the images, as follows:

h1, h2 {
    color: hotpink;
    font-size:2em;
    font-weight: bold;
    margin-bottom: 5px;          
}

Next, we are going to add a deepskyblue border around the images with slightly rounded corners to make them stand out more. Update the store.css file to add a new style for the img tag as follows:

img {
    border: 3px solid deepskyblue;
    border-radius: 3px;
}

The effect of these two changes is shown in Figure 15-10.

Figure 15-10. Images with rounded borders

Basic Link Styling

Next, we need to do something with the links to each product. Currently they are pretty small (because the font-size is inherited from the body style) and they appear in different colors once the link has been visited. We are going to update the links so they are larger and appear differently when hovered or visited.

First, we create a new style entry in the store.css file. We’ll create a style that targets a class named large-bold-text. We have created this class so it can be reused in pages where we want to show some large text not rendered by the h1 or h2 tags.

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

Now update the ViewsHomeIndex.cshtml file in order to add this class to each link generated for the product’s name. Add the HTML attribute shown in bold:

@foreach (var item in Model)
{
    <div class="col-md-3">
        @if (item.ProductImage != null)
        {
            <a href="@Url.Action("Details", "Products", new { id = item.Product.ID })">
                <img src="@(Url.Content(Constants.ProductImagePath) + item.ProductImage)">
            </a>
        }
        <p>
            @Html.ActionLink(item.Product.Name, "Details", "Products", new { id =
                item.Product.ID }, new { @class = "large-bold-text" })
        </p>
    </div>
}

This will make the links to each product 1.5 times larger and bold, as shown in Figure 15-11.

Figure 15-11. The effect of the new large-bold-text class on the links to each product

Now we’re going to show you how to update all the links so that they are the same color as the other text in the page, plus we’re only going to show the underline when a user hovers over the links. When they hover, we’re going to change the color of the link to hotpink.

First, in order to change the color of each hyperlink to be the same whether visited or not and to remove the underline, add the following style to store.css:

a, a:visited {
    color: rgb(14, 117, 204);
    text-decoration: none;
}

Next, to change the color upon hovering and to make the underline reappear, add the following style to store.css:

a:hover {
    color: hotpink;
    text-decoration: underline;
}

Figure 15-12 shows the effect of these changes on the links to products. Each link is now blue, except for the link to the pram, which is pink and underlined, because it is being hovered over.

Figure 15-12. The restyled links

Styling a Hyperlink to Look Like a Button

We are now going to style the Shop Now link so it looks and behaves like a button. The HTML for this link looks like this: <a class="btn btn-primary btn-lg" href="/Products">Shop Now</a> so we are going to use the CSS classes btn, btn-primary, and btn-lg to format it. We are going to treat the CSS styles as follows:

• a.btn will represent any link that is a button

• a.btn-primary will be represent a color (in this case, green)

• a.btn-lg will determine the size of the button

Add two new styles to store.css to change the color of any hyperlink that is of the class a.btn-primary as follows:

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

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

This will add a light green background to the Shop Now link. When you hover over the link, the background will become darker. Now add some sizing to the link by adding a style for a.btn-lg as follows:

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

Figures 15-13 and 15-14 show the current default state of the Shop Now link and when hovered over. As you can see, there are still a number of issues. It does not look like a button yet and the text is not a suitable color and changes color to pink when hovered over. These are both due to inheriting from the a style created earlier, plus the link now overlaps the hr element below it.

Figure 15-13. The Shop Now link’s current default format

Figure 15-14. Hovering over the Shop Now link turns the text pink

To stop the link from overlapping the hr element, add a new style to store.css in order to add a bottom margin to the jumbotron class (the jumbotron class surrounds the content of the home page), as follows:

.jumbotron{ margin-bottom: 20px; }

Next add a new style for a.btn as follows to create some rounded corners, ensure the text is always white, and that no underline appears:

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

You can see in Figure 15-15 that this link now appears much more button like; however, it has a flat appearance.

Figure 15-15. The updated Shop Now link when hovered over

To give the button a more raised look, add the following border properties. These create a two-pixel wide border, which is outset with a button style effect:

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

The Shop Now link should now appear much more button-like, as shown in Figure 15-16.

Figure 15-16. The Shop Now link with a button-like appearance

Removing an Element from the Page Flow Using CSS

We are going to wrap up this chapter by getting rid of the hr element (the line between the Shop Now link and the footer) using CSS. To completely remove this from the flow of the page, add the following style to store.css:

hr{
    display:none;
}

The completed page should appear as shown in Figure 15-17, with the line between the Shop Now link and footer removed.

Figure 15-17. The updated home page with the line generated by the hr tag removed

Summary

This chapter covered several different CSS topics and restyled the home page of the site. We started by restyling the footer using height, line-height, and padding to position text within an element, plus we used border-radius to make the corners appeared rounded. We then restyled the heading tags followed by introducing working with floats to position elements next to one another, and discussed how to use clearing to reset the flow of the page.

We then moved onto styling the appearance of the images in the page and how to add basic styling to hyperlinks, finishing the chapter with an example of how to style a hyperlink as a button and how to completely hide an element using CSS.