Basic Process to Apply CSS to Your Website

thumb_css

If you are very new to CSS, you might think to create a layout with CSS from scratch is a bit difficult. However, you’ll get used to it when you understand common properties and build it little by little. I made a sample so you can download and have a look deeply.

Step-by-Step Creating a Website Guide: Chapter 7

  • Goal: Creating a basic layout and style elements
  • Things you need: Text edit tool like Windows Notepad / Mac Textedit. Or HTML editor software like Adobe Dreamweaver
  • Knowledge Requirement: Knows basic CSS rules, common properties

Table of Contents

  1. Planning a Perfect Website Content
  2. Visualize Website Structure – Sitemap
  3. How to Create a Website Wireframe
  4. Photoshop Website Design Tutorial
  5. Slicing Images for Your Website with Photoshop
  6. Guide to HTML Semantic Markup
  7. Basic Process to Apply CSS to Your Website ←We are here!
  8. Let’s Publish Your Website to the World!

Sample File

I share a sample file that I made for this tutorial. Please DO NOT use this template except for your studying. It’s tested on Google Chrome, Safari, Firefox, IE8&9.

Demo
Download

Styling HTML pages with CSS

General Setting

style.css
Let’s create a new CSS file named “style.css” and save it in the same folder as your HTML file.

Load to HTML File

Open your index.html and write this code inside of <head>〜</head>. And index.html will load CSS file.

<link rel="stylesheet" href="style.css">

Reset Default CSS

Each browser set up default CSS. But most of them are different so resetting default CSS will make it easier to style what you want to display.

/* Reset CSS */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,
pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,
strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,
caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,
figure,footer,header,hgroup,menu,nav,section,summary,time,mark,
audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;
vertical-align:baseline;background:transparent;font-weight:normal;}
body{line-height:1}article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{display:block}
ul{list-style:none}blockquote,q{quotes:none}blockquote:before,
blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;
font-size:100%;vertical-align:baseline;background:transparent}
del{text-decoration:line-through}abbr[title],dfn[title]
{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;
margin:1em 0;padding:0}input,select{vertical-align:middle}

Background and Font Setting

Let’s start to style with a background and font.

body{
     background: #ebe6d3 url(images/bg.jpg) repeat-x;
     font: 16px/20px helvetica,arial,verdana,sans-serif;
     color: #666;
}

a{ color: #69c;}
     a:hover{color:#069;}
CSS

Much better than nothing…?

Make a Layout

Display a Content in the Center

There are header, #hero, #projects, #about, footer inside of div which has an ID of wrapper. Display #wrapper in the center of a browser using margin property. It’s welcome to apply background colour to each main div and section if it’s easier.

#wrapper{
     width: 960px;
     margin: 0 auto;
}
中央に表示されました!

It’s displayed in the center of your browser.

2 Column Layout

Apply float: left; to #projects and #about . Please have a look your Photoshop file to see the width and margin.

#projects{
     width: 670px;
     float: left;
     margin-right: 30px;
}

#about{
     width: 260px;
     float: left;
}

Now it’s 2 column! …Wait, why is footer there??

Reset a Float #1

You need to reset floating blocks. There are a few ways to reset it but I used the way to create a pseudo-element before footer and apply clear:both; to it. This is a good way if there is no wrapped div. If you are not familiar with this, just remember this as a magic. Additionally, you have to adjust around this code if you need to support IE7 or below.

footer:before{
    content: "";
    display: table;
    clear: both;
}

Footer moved to the bottom.

Header

Logo and a Navigation Menu

Logo and a navigation menu are used float, and menu lists are used display:inline; to display horizontally.

header .logo{float: left;}

nav{
     float: right;
     margin-top: 35px;
     font-size: 125%;
}
     nav li{
          display: inline;
          margin-left: 30px;
     }
     nav a{
          color: #666;
          text-decoration: none;
     }
     nav a:hover{color: #69c;}

Reset a Float #2

Reset a Float with different way. This time you can use only overflow: hidden; to header which wraps floating elements. How easy!

header{
     margin: 50px 0 15px;
     overflow: hidden;
}

Adjust margins and done to make a header area!

Main Area

Hero Image Area

Shadow image is displayed as a background. A position of background is placed 400px from the top.

#hero{
     background: url(images/shadow.jpg) no-repeat center 400px;
     margin-bottom: 70px;
}
     #hero img{border: 5px #fff solid;}
     #hero p{
          font-size: 167%;
          text-align: center;
          margin-top: 30px;
     }

Above the fold will be like this!

Heading

Heading has a border on the left side using border-left.

#projects h1{
     font-size: 125%;
     border-left: 5px #d95483 solid;
     padding-left: 10px;
     margin-bottom: 15px;
}

Often see this style don’t you?

Thumbnail Images

Apply 20px margin on the right to each li tag.

#projects li{
     float: left;
     margin: 0 20px 20px 0
}
#projects img{border: 5px #fff solid;}
     #projects img:hover{border: 5px #69c solid;}

Then, images on the right will be fallen because margin width is bigger than a box.

Avoid this, you need to apply overflow:hidden; and negative margin to ul element that is a parent of li. 20px right margin will be hidden.

#projects ul{
     overflow: hidden;
     margin-right: -20px;
}

Side

You don’t have to write a new style for this area because it’s used the same thing as a main content area. Use comma ” , ” to separate selectors to apply the same style.

#projects h1, #about h1{
     font-size: 125%;
     border-left: 5px #d95483 solid;
     padding-left: 10px;
     margin-bottom: 15px;
}

We finished to make a main area! Almost there!

Footer

Copyright area. Apply display:block to small tag to make it a block element in order to display a border properly.

footer p{
     background: #69c;
     width: 200px;
     margin: 50px auto 20px;
     padding: 5px;
     text-align: center;
     font-size: 75%;
}
     footer p small{
          color: #fff;
          border: 1px #fff solid;
          padding: 10px;
          display: block;
     }
     footer a{color: #fff}

Yay! Finished!

We created a web page with basic CSS!

This is the whole CSS code:

/* CSS Reset */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,
pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,
strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,
caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,
figure,footer,header,hgroup,menu,nav,section,summary,time,mark,
audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;
vertical-align:baseline;background:transparent;font-weight:normal;}
body{line-height:1}article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{display:block}
ul{list-style:none}blockquote,q{quotes:none}blockquote:before,
blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;
font-size:100%;vertical-align:baseline;background:transparent}
del{text-decoration:line-through}abbr[title],dfn[title]
{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;
margin:1em 0;padding:0}input,select{vertical-align:middle}

/* General Setting */
body{
	background: #ebe6d3 url(images/bg.jpg) repeat-x;
	font: 16px/20px helvetica,arial,verdana,sans-serif;
	color: #666;
}

a{ color: #69c;}
	a:hover{color:#069;}

#wrapper{
	width: 960px;
	margin: 0 auto;
}
#projects h1, #about h1{
	font-size: 125%;
	border-left: 5px #d95483 solid;
	padding-left: 10px;
	margin-bottom: 15px;
}


/* Header */
header{
	margin: 50px 0 15px;
	overflow: hidden;
}
header .logo{float: left;}

nav{
	float: right;
	margin-top: 35px;
	font-size: 125%;
}
	nav li{
		display: inline;
		margin-left: 30px;
	}
	nav a{
		color: #666;
		text-decoration: none;
	}
	nav a:hover{color: #69c;}
	
	
/* Main Area */
#hero{
	background: url(images/shadow.jpg) no-repeat center 400px;
	margin-bottom: 70px;
}
	#hero img{border: 5px #fff solid;}
	#hero p{
		font-size: 167%;
		text-align: center;
		margin-top: 30px;
	}
	
	
/* Latest */
#projects{
	width: 670px;
	float: left;
	margin-right: 30px;
}
	#projects ul{
		overflow: hidden;
		margin-right: -20px;
	}
	#projects li{
		float: left;
		margin: 0 20px 20px 0
	}
	#projects img{border: 5px #fff solid;}
		#projects img:hover{border: 5px #69c solid;}


/* About */
#about{
	width: 260px;
	float: left;
}


/* Footer */
footer:before{
	content: "";
    display: table;
    clear: both;
}
footer p{
	background: #69c;
	width: 200px;
	margin: 50px auto 20px;
	padding: 5px;
	text-align: center;
	font-size: 75%;
}
	footer p small{
		color: #fff;
		border: 1px #fff solid;
		padding: 10px;
		display: block;
	}
	footer a{color: #fff}

Of course the way to style depends on a website, so you need to get used to it. Please enjoy to make different layout or style of website! I will share how to upload your website to the live!

» Next chapter: Let’s Publish Your Website to the World!

Share

Comments