How to Design a Web Page Using Cascading StyleSheet

But we want this background image to be treated as a link and for that, we need to reach the anchor element. By default, the display property of the heading (h1 to h6) is inline. So, in order to make every header a link, we need to pass the display property value as a block. Step 6 The next step is to align the link vertically and remove the list style. I want the list items of the unordered list to be in a vertical format. So, to reach the inner element I used #nav li. Now our links are floating to the left. If you look at the hyperlinks carefully, you will see some space on the left side. To remove that space I can specify the padding as 0 and the margin as 0 that will place it into the initial position. Output

Just after the hyperlinks, we can see a Sub Heading One text suffixed. So, how can we remove and shift it to its initial place? We can add an empty paragraph element. Yes. But we will see a different way to do it. We will use a class named “clearfix” that is a reusable class. It will shift the sub-heading one line down. We have used the content property and passed the value of dot (.). We have set the height of the content to 0 and made the content invisible. We have passed the display value as a block. That will treat the content as a standalone area and will shift the sub-heading down again. That will make the contents look cleaner. The next thing we will do is, we will remove the underline decoration from the links and will add some spacing between the links. Output The next thing we will add is the background color. Output In the output, we have added a background color of yellow for our hyperlinks but I want the background color to be stretched horizontally to the width of the container. So, remove the background-color property from the #nav li a: link, #nav li a: visited section and add it to the main #nav section as in the following. Use the width property and pass the value of 900px. Output

Now let's add some padding to our hyperlinks from every side. But before you add padding, remove the padding-right property first. Output

In the output, you will see the padding occurred only horizontally but not vertically and the reason is that the anchor tag is inline elements. So, in order to pad vertically first, we need to make this inline element into a block element. Output

Now let's add some hover effects. When a user hovers his/her mouse on any of the links, we want to change the background color to Red and the text color to Yellow. Output

Now let's add a solid border to the right of each link with 1 px each. Output

Until now we have added a background image to the header section and we have modified our navigation section. Step 7

The next step is to modify the body section. In the body section, I want to align the main section to the front and the side section to the right side and for that, we can use the float property. Output

We have the output as excepted. But there is a bit of a problem too. We want the footer section to be displayed at the bottom but currently, it is displayed right below the side section. To place the footer section to its initial position, we can pass the clearfix class in the body div section. Now, let's add some padding to the main section because both of these sections are tightly coupled. So, let's loosen them by passing the padding value of 60px in the main section. Output

In the output, we can see that the 60px padding shifted the side section downwards but we want the padding to be done only inside the main section. To do it we need to add another div section inside the main div section. In the CSS file, add the padding in the main-inner section. Output

If you want to align the side column with the main column, then add the padding-top property and add the value of 60px. Now let's add a background colour in our body div section. Pass the colour value of white and grey for the gradient effect. Output

Add color of Orange and set the font-family to Garamond for the entire body. Output Make the footer content bold using the font-weight property. Output So, in this article, we have started our journey from an ugly design and ended with a less ugly design. In our next article, we will see how to create a loading screen using CSS. Until then keep learning. Thank you.