How to Design a Web Page Using Cascading StyleSheet

Harpreet Singh
Feb 23, 2015
7.3k
0
2
Article

The following two images shows from where we will start creating our Home Page and to where we will reach after the end of this article.

The following image shows an ugly looking page.

css layout

The following image shows a less ugly looking page.

So, let's begin without any delay.

Create a file Index.html in your Notepad or the text editor you use.

I am using the Sublime Text 2 editor.

Step 1

<html>
<head>
<title>HomePage Layout</title>
</head>
<body>
<div id="container">
</div>
</body>
</html>

The preceding HTML code contains the html tag. Then the head section inside has a title section.

Then we have a body section that is our parent element. In the body section we have a div element with an id “container” that will act as the parent element for the rest of the section.

Step 2

First we will add the header section in our container div.

<div id="container">
<div id="header">
lt;h2 id="myHeader"><a href="#">Css Layout</a></h2>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Offers</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>

Inside the container element we have added another div element named “header” in which there is an h2 element with id of MyHeader and an ul element with Id of nav (un-ordered list).

The h2 element will be treated as the heading or the name of the website and we have made this h2 element a hyperlink.

We have added an un-ordered list element inside which there are five list items and all these items are acting as a hyperlink.

Output

Step 3

The next step is to add some content and for that we will add another div element with an id “body” that will contain two more div elements, one with a class = “main” and another with a class =”side”.

<div id="body">
<div class ="main">
</div>
<div class="side">
</div>
</div>

Now, let's add two headers and three paragraphs in these sections.

<div id="body">
<div class ="main">
<h2>Sub Heading One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Sub Heading Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="side">
lt;p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
</div>

Note

The paragraph contents are the code snippets provided by the sublime text editor.

Output

html page

After the closing <div> of the body div, add another div with an id ”footer”.

<div id="footer">
<footer>© all rights reserved 2015</footer>
</div>

© is used to create a copyright logo.

Output

sub heading

So, we have created our ugly homepage.

Now let's see how to make it less ugly using CSS.

Step 4

Let's first add a CSS file and give it the name “style.css”.

Since we are using the external stylesheet file, it is mandatory to specify the location of the stylesheet.

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

To modify any element using Id, we use the # symbol suffixed with the Id value and for the class we use (.) dot.

#container{
}

The container is the Id of our parent div.

We will give this container a width of 900px.

#container{
width: 900px;
}

If we run the page now, the content will shrink to the width of 900px.

sub heading 2

Now what we will do is, we will move the entire container to the center and for that we can use the margin property.

#container{
width: 900px;
margin: 0 auto;
background-color: white;
}

Output

Output

Now our container is centeedr.

But how does this margin property work?

When you have you have applied margin: 0 auto in which you have specified the width pixels, the child container will sit centrally within its parent container.

The value 0 states the top and bottom margin will be set equally, in other words 0.

The auto value states that the browser will automatically determine the margins from the left to the right by setting them equally.

Step 5

The next step is to change the header with an image.

The first thing we need to do is to hide the text from the h2, in other words a CSS Layout. For that we can use the text-indent property and assign the value -9999px.

#myHeader{
text-indent: -9999px;
}

The next three properties that we will use is the background where we will specify the URL of the image and the other two properties will be the width and height of the image.

But we want this background image to be treated as a link and for that we need to reach the anchor element.

#myHeader a:link, #myHeader a:visited{
width: 900px;
height: 120px;
display: block;
}

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.

#nav li{
float: left;
list-style: none;
}

I want the list items of the un-ordered list to be in vertical format. So, to reach the inner element I used #nav li.

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.

#nav{
padding: 0;
margin: 0;
}

Output

sub heading 1

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 re-usable class.

.clearfix{
display: inline-block;
}

It will shift the sub-heading one line down.

.clearfix:after{
content: '.';
height: 0;
visibility: hidden;
display: block;
}

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.

#nav li a:link, #nav li a:visited{
/*It will shift all the links to the right*/
padding-right: 15px;
/*The none value will remove all the text decorations from the links*/
text-decoration: none;
}

Output

remove the underline

The next thing we will add is a background colour.

#nav li a:link, #nav li a:visited{
padding-right: 15px;
text-decoration: none;
/*adding a background color*/
background-color: yellow;
}

Output

In the output, we have added a background colour of yellow for our hyperlinks but I want the background colour to be stretched horizontally to the width of the container. So, remove the background-colour property from the #nav li a:link, #nav li a:visited section and add it to the main #nav section as in the following.

#nav{
padding: 0;
margin: 0;
width: 900px;
background-color: yellow;
}

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.

#nav li a:link, #nav li a:visited{
/*It will shift all the links to the right*/
padding: 10px;
text-decoration: none;
}

Output

reason

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

#nav li a:link, #nav li a:visited{
padding: 15px;
text-decoration: none;
display: block;
}

Output

block element

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 colour to Red and the text colour to Yellow.

#nav li a:hover{
background-color: yellow;
color:red;
}

Output

text colour

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

#nav li a:link, #nav li a:visited{
padding: 15px;
text-decoration: none;
display: block;
/*adding a right border*/
border-right: 1px;
/*to style a right border*/
border-right-style: solid;
/*adding a color*/
border-right-color: green;
}

Output

solid border

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.

.main{
width: 600px;
float: left;
}
.side{
width:300px;
float: left;
}

Output

modify the body section

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.

<div id="body" class="clearfix">

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.

.main{
width: 600px;
float: left;
padding: 60px;
}

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.

<div class ="main">
<div class="main-inner">
Contents goes here
</div>
</div>

In the CSS file, add the padding in the main-inner section.

.main-inner{
padding: 60px;
}

Output

Pass the colour value

If you want to align the side column with the main column, then add the padding-top property and add the value of 60px.

.side{
width:300px;
float: left;
padding-top: 60px;
}

Now let's add a background colour in our body div section.

#body{
background: linear-gradient(white,grey);
background-repeat: top-left;
}

Pass the colour value of white and grey for the gradient effect.

Output

Add a colour of Orange and set the font-family to Garamond for the entire body.

body{
background-color: orange;
font-family: garamond;
}

Output

Make the footer content bold using the font-weight property.

#footer{
font-weight: bold;
}

Output

weight property

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.