part0030

The banner component shows a very large image to welcome our website visitors. Figure 19.5.1 highlights the banner component.

The image on the banner component is provided in the chapter 19 folder in the CD-ROM that comes with this book. The following steps will guide you on how to create the banner component.

Step 1: Add a new <section> tag immediately after the <nav> tag in your index.html file. Figure 19.5.2 highlights a <section> tag added within our index.html.

NOTE: The closing </div> tag highlighted on Figure 19.5.2 is the closing </div> tag for our container element. You should add the new <section> tag for the banner within the <div> tag that has an “ID” attribute with the value of “container”.

Step 2: Use an <img> tag to add a banner from “images” folder. Figure 19.5.3 highlights an <img> tag for adding a banner to our website.

Figure 19.5.3: A new banner image is added to index.html from the images folder in our “dixre_foundation” project folder.

The image we just added is a very large image. You can refresh your web browser to see what it looks like.

Step 3: Select the <img> tag from style.css file and change its width and height. Figure 19.5.4 highlights the new CSS rules styling our banner image.

Figure 19.5.5 shows how our web page currently looks like.

Figure 19.5.5: index.html file opened in a web browser after applying a width and height property to the image in our banner.

Before we complete the steps for setting up the banner component, I will like to bring to your attention a new type of selector that we have been using which you might not be familiar with.

This type of selector is used for matching elements that are nested within another element. Figure 19.5.6 highlights an example of a descendant selector which we used in the previous chapter to style our navigation component. The descendant selector highlighted in Figure 19.5.6 will select all <li> tags nested inside a <ul> tag. The <ul> tag is also nested within a <nav> tag.

Descendant selectors are not only limited to tag names. “ID” or “class” attribute values can also be combined together with tag names to form a descendant selector. For example, consider the selector we initially used in Figure 19.5.4 highlighted on Figure 19.5.7.

From the CSS selector highlighted on Figure 19.5.7, we are selecting any image that is nested within an element that has an “ID” attribute with the value of “banner”. As you work with descendant selectors, you will gain a better understanding on how they help to improve the way we select elements.

With the new selector we just learned about, we can proceed with completing our banner component from where we stopped.

Step 4: Apply some padding to the image on our banner component. Figure 19.5.8 highlights a padding property applied to the image on our banner component.

You will observe that after we applied some padding to the image on the banner component, the image couldn't fit as highlighted on Figure 19.5.9. To fix this, we have to do a quick review on CSS box model.

Recall that by applying a single value to the “padding” property, it applies the same value to “padding-top, padding-right, padding-bottom, and padding-left”. Here, we are more concerned about “padding left and right”.

NOTE: When you are working with HTML elements, always make sure that the width of your nested elements are not higher than the width of their “parent”. For example, the parent element for our banner component is the <div> tag with an “ID” attribute that has the value of “container”.

Our “container” is currently having the width of 960px as highlighted on Figure 19.5.10.

Likewise, the image in our banner component is also having a width of 960px as highlighted on Figure 19.5.11.

The point I am driving is, whenever you apply a “padding” either left, right or both, or “margin” left, right or both to an element, the value provided to either of both properties increases the actual width of the element. For example, the image within our banner component is 960px and we applied a “padding” of 15px to it which applies to “padding-top, right, bottom, and left”. What happens is, after applying a padding to an element that has a width of 960px, an additional 30px is added to the width. i.e. “padding-left” and “padding-right”; 15px on both sides.

So how do we fix this? We simply reduce the width of the element by the additional width added, which in this case is “30px”. This implies that, we have to reduce the width of our banner to 930px for it to fit within its parent container. Figure 19.5.12 highlights the new width of the image in our banner component.

Figure 19.5.13 shows the new changes on the image in our banner component.

From Figure 19.5.13 you will observe that after applying a padding to the image in our banner component, it fits within the banner component.

Step 5: Apply a background color and box shadow to the banner component. Figure 19.5.14 highlights the new CSS properties added to the image in our banner component.

In a previous chapter, we saw how the “box-shadow” property works, but without the third value highlighted on Figure 19.5.14. The third value highlighted (10px) is an optional value. It is used for blurring box shadows. The higher the number, the more blurred the shadow becomes. Figure 19.5.15 shows how our completed banner component looks like.

Figure 19.5.15: index.html file opened in a web browser after applying some new CSS rules to the “img“ descendant selector.

We have successfully completed the banner component of our web page. In the next section, we will work on the welcome message component.