In the Previous tutorial of this series, I’ve shown how to start building a website with the HTML code and its main elements. Now it’s time to introduce the first CSS rules in order to have a general idea of the graphic style that the homepage of our website will display, especially for the pc-desktop version. First of all, before having a look on the rules we have to apply in order to create a particular design for our homepage, let’s see how it will appear in our browser window (my default browser is Chrome but, with the application of some specific rules, you’ll be able to obtain the same result for all modern web-browsers). The homepage of our totally customizable website should look more or less as following:
For the content section, let’s create a main div whose ID is “content-wrapper”, a wrapper div, and put an product or article within it. We just put lorem ipsum text in the article as text. We just add a content wrapper element look like this:
<div id="content-wrapper">
put your website content here
</div>
and our final html structure code look like this:
<!DOCTYPE HTML>
<html lang=”en”>
<head>
<meta charset=utf-8" />
<meta name="viewport" content="width=device-width">
<title>Fluid Responsive Template</title>
</head>
<body>
<header>
<div id="header">
<h1>Responsive Template</h1>
</div>
</header>
<div id="content-wrapper">
<h2>Suspendisse commodo purus aliquam mi</h2>
<p>Donec sed urna l ectus, vel viverra tellus. Nullam molestie tortor eu erat aliquet fermentum. Suspendisse commodo purus aliquam mi tempor pulvinar. Pellentesque bibendum suscipit dui, id vehicula leo aliquet at. Duis sem diam, pharetra sed posuere sed, iaculis vitae leo.</p>
<div class="box"><h2>Pellentesque bibendum</h2><img class="image-box" src="https://www.google.com.pk/images/srpr/logo11w.png" />Curabitur pulvinar odio ut magna aliquet consequat. Etiam id euismod justo. Praesent vel lectus ipsum, ac placerat urna. Quisque a leo nibh. Curabitur bibendum accumsan orci eget euismod. Pellentesque mattis gravida imperdiet.</div>
<div class="box"><h2>Pellentesque bibendum</h2><img class="image-box" src="https://www.google.com.pk/images/srpr/logo11w.png" />Curabitur pulvinar odio ut magna aliquet consequat. Etiam id euismod justo. Praesent vel lectus ipsum, ac placerat urna. Quisque a leo nibh. Curabitur bibendum accumsan orci eget euismod. Pellentesque mattis gravida imperdiet.</div>
<div class="box"><h2>Pellentesque bibendum</h2><img class="image-box" src="https://www.google.com.pk/images/srpr/logo11w.png" />Curabitur pulvinar odio ut magna aliquet consequat. Etiam id euismod justo. Praesent vel lectus ipsum, ac placerat urna. Quisque a leo nibh. Curabitur bibendum accumsan orci eget euismod. Pellentesque mattis gravida imperdiet. </div>
<div class="box"><h2>Pellentesque bibendum</h2><img class="image-box" src="https://www.google.com.pk/images/srpr/logo11w.png" />Curabitur pulvinar odio ut magna aliquet consequat. Etiam id euismod justo. Praesent vel lectus ipsum, ac placerat urna. Quisque a leo nibh. Curabitur bibendum accumsan orci eget euismod. Pellentesque mattis gravida imperdiet.</div>
<br style="clear:both" />
</div>
</body>
</html>
We’ll proceed step-by-step from the upper part of our layout to the bottom. The code for the very first part (which includes the elements of header). The first one is the banner element, with this code for styling:
#header {
margin:0%;
text-align: left;
padding:2%;
background: rgba(0,0,0,0.1);
height:50px;
}
#header h1 {
font-size: 40px;
font-variant:small-caps;
font-weight: bold;
color: #fff;
line-height: 50px;
margin:0% 0% 0% 0%;
padding:0%;
}
These first rules simple enough to understand. To space the header from the top of the browser window we’re applying a margin of 0% and to let our header cover all the width of our browser’s window, we’ve set the corresponding rule with a percentage of 100.
Now let’s create CSS for the content-wrapper section:
#content-wrapper {
margin:1%;
padding:2%;
background: rgba(0,0,0,0.1);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
box-shadow: 0 10px 7px -7px rgba(0,0,0,0.12), 0 0 4px rgba(0,0,0,0.1);
}
.box {
background: #ffffff;
padding: 2%;
margin: 2% 0% 0% 2%;
width: 18%;
display: inline-block;
vertical-align: top;
border: 1px solid transparent;
box-shadow: 0 10px 7px -7px rgba(0,0,0,0.12), 0 0 4px rgba(0,0,0,0.1);
}
.image-box {
max-width: 40%;
float: left;
padding: 0px 2% 1% 0%;
}
I won’t explain the rules one by one as for the first part, especially because they are almost all the same. The only thing to which I’d like you’d attention is the box shadow property.
This property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.
Let’s move on to the general part, that is on the rules applied to elements such as heading, paragraphs, images, boxes appearance and so on. Here is the code with the specifications of the rules for the layout.
body {
color: #111;
background: #71BBC8;
font-family:Verdana, Geneva, sans-serif;
font-size:100%;
padding: 0em;
margin: 0em;
}
a {
color: rgba(0,0,0,0.4);
text-decoration: none;
outline: none;
}
a:hover {
cursor:pointer;
}
a:focus {
outline:none;
}
img,object,embed {
max-width:100%;
height:auto;
}
object,embed {
height:100%
}
img{
-ms-interpolation-mode:bicubic;
}
p {
margin-top: 0;
margin-bottom: 0.5em;
}
h1, h2, h3 {
text-align: left;
}
Let’s start the adding footer section in your template.
<footer id="footer">Copyright © 2020 | My Responsive Web Template</footer>
Now our HTML code look like this:
<!DOCTYPE HTML>
<html lang=”en”>
<head>
<meta charset=utf-8" />
<meta name="viewport" content="width=device-width">
<title>Fluid Responsive Template</title>
</head>
<body>
<header>
<div id="header">
<h1>Responsive Template</h1>
</div>
</header>
<div id="content-wrapper">
<div class="box"><h2>Pellentesque bibendum</h2><img class="image-box" src="https://www.google.com.pk/images/srpr/logo11w.png" />Curabitur pulvinar odio ut magna aliquet consequat. Etiam id euismod justo. Praesent vel lectus ipsum, ac placerat urna. Quisque a leo nibh. Curabitur bibendum accumsan orci eget euismod. Pellentesque mattis gravida imperdiet.</div>
<div class="box"><h2>Pellentesque bibendum</h2><img class="image-box" src="https://www.google.com.pk/images/srpr/logo11w.png" />Curabitur pulvinar odio ut magna aliquet consequat. Etiam id euismod justo. Praesent vel lectus ipsum, ac placerat urna. Quisque a leo nibh. Curabitur bibendum accumsan orci eget euismod. Pellentesque mattis gravida imperdiet.</div>
<div class="box"><h2>Pellentesque bibendum</h2><img class="image-box" src="https://www.google.com.pk/images/srpr/logo11w.png" />Curabitur pulvinar odio ut magna aliquet consequat. Etiam id euismod justo. Praesent vel lectus ipsum, ac placerat urna. Quisque a leo nibh. Curabitur bibendum accumsan orci eget euismod. Pellentesque mattis gravida imperdiet. </div>
<div class="box"><h2>Pellentesque bibendum</h2><img class="image-box" src="https://www.google.com.pk/images/srpr/logo11w.png" />Curabitur pulvinar odio ut magna aliquet consequat. Etiam id euismod justo. Praesent vel lectus ipsum, ac placerat urna. Quisque a leo nibh. Curabitur bibendum accumsan orci eget euismod. Pellentesque mattis gravida imperdiet.</div>
</div>
<br style="clear:both" />
</div>
<footer id="footer">Copyright © 2020 |Responsive Template</footer>
</body>
</html>
and CSS Code should look like this:
body {
color: #111;
background: #71BBC8;
font-family:Verdana, Geneva, sans-serif;
font-size:100%;
padding: 0%;
margin: 0%;
}
a {
color: rgba(0,0,0,0.4);
text-decoration: none;
outline: none;
}
a:hover {
cursor:pointer;
}
a:focus {
outline:none;
}
p {
margin-top: 0;
margin-bottom: 1%;
}
img,object,embed {
max-width:100%;
height:auto;
}
object,embed {
height:100%
}
img{
-ms-interpolation-mode:bicubic;
}
#header {
margin:0% auto;
text-align: left;
padding:2%;
background: rgba(0,0,0,0.1);
height:50px;
}
#header h1 {
font-size: 40px;
font-variant:small-caps;
font-weight: bold;
color: #fff;
line-height: 50px;
margin:0% auto;
padding:0%;
}
#content-wrapper {
margin:2%; padding:2%;
background: rgba(0,0,0,0.1);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
box-shadow: 0 10px 7px -7px rgba(0,0,0,0.12), 0 0 4px rgba(0,0,0,0.1);
}
#footer{
clear: both;
margin:1%;
padding:1%;
background-color:none;
color: rgba(0,0,0,0.4);
text-align: center;
height:20px;
line-height: 20px;
}
.box {
background: #ffffff;
padding: 2%;
margin: 2% 0% 0% 2%;
width: 18%;
display: inline-block;
vertical-align: top;
border: 1px solid transparent;
box-shadow: 0 10px 7px -7px rgba(0,0,0,0.12), 0 0 4px rgba(0,0,0,0.1);
}
.image-box {
max-width: 40%;
float: left;
padding: 0px 2% 1% 0%;
}
This is it! now template is ready with general styling, above full code and working example – all in the demo:
I’m not much of a designer but I will do my best to make this look amazing.
In this article we’ve seen the basic rules to create a simple layout for a website. After concentrating on the pc-desktop version, in the next article we’ll see which are the rules to apply to make this layout responsive.
