Post
Ask Question

How to Design a Web Page Using Cascading StyleSheet

Introduction

 
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.
 
less ugly
 
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
  1. <html>  
  2. <head>  
  3.     <title>HomePage Layout</title>  
  4. </head>  
  5. <body>  
  6.     <!--The main container div that will hold all the contents-->  
  7.     <div id="container">  
  8.     </div>  
  9. </body>  
  10. </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.
  1. <div id="container">  
  2.     <!--The header section-->  
  3.     <div id="header">  
  4. lt;h2 id="myHeader"><a href="#">Css Layout</a></h2>  
  5.         <!--The menu bar-->  
  6.         <ul id="nav">  
  7.             <li><a href="#">Home</a></li>  
  8.             <li><a href="#">About Us</a></li>  
  9.             <li><a href="#">News</a></li>  
  10.             <li><a href="#">Offers</a></li>  
  11.             <li><a href="#">Contact Us</a></li>  
  12.         </ul>  
  13.     </div>  
  14. </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 unordered list element inside which there are five list items and all these items are acting as a hyperlink.
 
Output
 
ordered list
 
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”.
  1. <!--the body section which contains the website information-->  
  2. <div id="body">  
  3.     <!--The front section of the body-->  
  4.     <div class ="main">  
  5.     </div>  
  6.   
  7.     <!--The side section of the body-->  
  8.     <div class="side">  
  9.     </div>  
  10. </div>  
Now, let's add two headers and three paragraphs in these sections.
  1.     <!--the body section which contains the website information-->  
  2.     <div id="body">  
  3.         <!--The front section of the body-->  
  4.         <div class ="main">  
  5.             <h2>Sub Heading One</h2>  
  6.                <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>  
  7.                   <h2>Sub Heading Two</h2>  
  8.                      <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>  
  9.     </div>  
  10.   
  11.            <!--The side section of the body-->  
  12.     <div class="side">  
  13.             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>  
  14.    </div>  
  15. </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”.
  1. <div id="footer">  
  2.    <footer>© all rights reserved 2015</footer>  
  3. </div>  
&copy; 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.
  1. <head>  
  2.    <link rel="stylesheet" type="text/css" href="style.css">  
  3. </head>  
To modify any element using Id, we use the # symbol suffixed with the Id value and for the class we use (.) dot.
  1. #container{  
  2.   
  3. }  
The container is the Id of our parent div.
 
We will give this container width of 900px.
  1. #container{  
  2.    width: 900px;  
  3. }  
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.
  1. #container{  
  2.    width: 900px;  
  3.    margin: 0 auto;  
  4.    background-color: white;  
  5. }  
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.
  1. #myHeader{  
  2.    text-indent: -9999px;  
  3. }  
myHeader
 
The next three properties that we will use are 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.
 
properties
 
But we want this background image to be treated as a link and for that, we need to reach the anchor element.
  1. #myHeader a:link, #myHeader a:visited{  
  2.    width: 900px;  
  3.    height: 120px;   
  4.    display: block;  
  5. }  
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.
  1. #nav li{  
  2.    float: left;  
  3.    list-style: none;  
  4. }  
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.
 
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.
  1. #nav{  
  2.    padding: 0;  
  3.    margin: 0;   
  4. }  
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 reusable class.
  1. .clearfix{  
  2.    display: inline-block;  
  3. }  
It will shift the sub-heading one line down.
  1. .clearfix:after{  
  2.    content: '.';  
  3.    height: 0;  
  4.    visibility: hidden;  
  5.    display: block;  
  6. }  
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.
 
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.
  1. #nav li a:link, #nav li a:visited{  
  2.    /*It will shift all the links to the right*/  
  3.    padding-right: 15px;  
  4.    /*The none value will remove all the text decorations from the links*/  
  5.    text-decoration: none;  
  6. }  
Output
 
remove the underline
 
The next thing we will add is the background color.
  1. #nav li a:link, #nav li a:visited{  
  2.    padding-right: 15px;  
  3.    text-decoration: none;  
  4.    /*adding a background color*/  
  5.    background-color: yellow;  
  6. }  
Output
 
background colour
 
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.
  1. #nav{  
  2.    padding: 0;  
  3.    margin: 0;  
  4.    width: 900px;  
  5.    background-color: yellow;  
  6. }  
Use the width property and pass the value of 900px.
 
Output
 
pass the value
 
Now let's add some padding to our hyperlinks from every side.
 
But before you add padding, remove the padding-right property first.
  1. #nav li a:link, #nav li a:visited{  
  2.    /*It will shift all the links to the right*/  
  3.    padding: 10px;  
  4.    text-decoration: none;  
  5. }  
Output
 
reason
 
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.
  1. #nav li a:link, #nav li a:visited{  
  2.    padding: 15px;  
  3.    text-decoration: none;  
  4.    display: block;  
  5. }  
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 color to Red and the text color to Yellow.
  1. #nav li a:hover{  
  2.    background-color: yellow;  
  3.    color:red;  
  4. }  
Output
 
text colour
 
Now let's add a solid border to the right of each link with 1 px each.
  1. #nav li a:link, #nav li a:visited{  
  2.    padding: 15px;  
  3.    text-decoration: none;  
  4.    display: block;  
  5.    /*adding a right border*/  
  6.    border-right: 1px;  
  7.    /*to style a right border*/  
  8.    border-right-style: solid;  
  9.    /*adding a color*/  
  10.    border-right-color: green;  
  11. }  
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.
  1. .main{  
  2.    width: 600px;  
  3.    float: left;  
  4. }  
  5.   
  6. .side{  
  7.    width:300px;  
  8.    float: left;  
  9. }  
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.
  1. <div id="body" class="clearfix">  
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.
  1. .main{  
  2.    width: 600px;  
  3.    float: left;  
  4.    padding: 60px;  
  5. }  
Output
 
main div section
 
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.
  1. <div class ="main">  
  2.    <div class="main-inner">  
  3.       Contents goes here  
  4.    </div>  
  5. </div>  
In the CSS file, add the padding in the main-inner section.
  1. .main-inner{  
  2.    padding: 60px;  
  3. }  
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.
  1. .side{  
  2.    width:300px;  
  3.    float: left;  
  4.    padding-top: 60px;  
  5. }  
Now let's add a background colour in our body div section.
  1. #body{  
  2.    background: linear-gradient(white,grey);  
  3.    background-repeat: top-left;  
  4. }  
Pass the colour value of white and grey for the gradient effect.
 
Output
 
Garamond for the entire
 
Add color of Orange and set the font-family to Garamond for the entire body.
  1. body{  
  2.    background-color: orange;  
  3.    font-family: garamond;  
  4. }  
Output
 
Make the footer content
 
Make the footer content bold using the font-weight property.
  1. #footer{  
  2.    font-weight: bold;  
  3. }  
Output
 
weight property
 

Conclusion

 
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.


Similar Articles