How to create CSS site ?

CSS defines HOW HTML elements are to be displayed.

All browsers support CSS today.CSS Saves a Lot of Work!


In HTML 4.0, all for matting could be removed from the HTML document, and stored in a separate CSS file.


Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!

h2> CSS Syntax </h2>



background-color: yellow;
















<link rel=”stylesheet” type=”text/css” href=”ex1.css” />



<h1>This is  header 1</h1>

<h2> This is  header 2</h2>

<h3> This is  header3</h3>

<h4> This is  header 4</h4>

<h5> This is  header 5</h5>

<h6> This is  header 6</h6>

<p>This is  paragraph </p>

<p>This is another  paragraph </p>



Next See

First we need to identify the main structural elements of the design, so that we know how to

structure our HTML document.

we need to dividing up our design. These main divisions we make will end up being

tags. A

is basically a rectangular container that we can position using CSS.


We have identified 6 major elements: (In CSS Web Page)


1Main Navigation

The primary navigation for this website. The images will change on hover (when the

mouse cursor is on top of it).

Width: 760px

Height: 50px


2• Header

The website header includes a background image (purely for aesthetics), and the

company name.

Width: 760px

Height: 150px


3• Content

The bulk of the website’s content will go here.

Width: 480px

Height: Changes depending on content


4• Left_Sidebar

This will have second‐tier content that isn’t as important as the main content.

Width: 280px

Height: Changes depending on content


5• Right_Sidebar

This will have second‐tier content that isn’t as important as the main content.

Width: 280px

Height: Changes depending on content



Copyright information, credits, and an  alternative text navigation.

Width: 760px

Height: 66px


Here   we  also be centered in the browser window. We now have all the info we need to


Setting the canvas

As you’ll notice in the design, everything on our page is 760px wide or less, and nothing

floats outside that width. What we are going to do is create a container for our page that is

760px wide,  and centered in the middle of the page. Our 5 main elements will be placed

inside this container.

Between the <body> </body> tags, create a <div> with an id=“page‐container” attribute:


<div id=”page-container”>

Are You OK ?



And thats all the HTML we need for our container. Onto the CSS.

Create a new blank text file, and save it as master.css in the /css/ directory.

Create a new rule in the stylesheet to select the page‐container:


#page-container {



The # in front of the id tells the browser that we are selecting an id. For a class we would use

a . instead eg: .page‐container {}.

An id is a unique identifier that we use for things that are only going to occur once on the

page. So for headers, footers, navigation, etc we use id’s, and for any reccuring elements

like links we should use classes, which can occur multiple times on the same page.

We won’t be able to see the changes we are making to this <div>, because it is transparent

by default. So the first thing we will do is make the background of the div red, to give us a

visible indicator of what we are doing:

#page-container {

background: red;


You should see something like this across the full width of your browser:

First we should set a width of 760px(Or Your Choose) on this div.


Creating a CSS layout


#page-container {

width: 760px;

background: red;


Refresh the page in your browser to see the rule being applied.

Next we want to center this div. This is done by setting the margins on it to auto. When the

left and right margins are set to auto, they will even each other out and the div will sit in the

center of its container.

#page-container {

width: 760px;

margin: auto;

background: red;


Now you should have a centered red 760px wide block with “Hello World.” written in it. But

its sitting about 8px away from the top/sides of the browser.

This is because the html and body tags have default margins and/or padding on nearly all

browsers. So we need to write a CSS rule to reset the margins and padding on the html and

body tags to zero. Add this rule to the very top of your css file:

html, body {

margin: 0;

padding: 0;


A comma in between CSS selectors stands for “or”, so here the rule will be applied to the

html tag or the body tag. Because both exist on the page, it will be applied to both.

Brilliant, now our box is where it should be. Note that as more content is added to this div, it

will automatically change its height to fit whatever content is placed inside it.


The major elements

We need to add 6 divs, all with individual id’s that describe their purpose. These divs will

correspond to the major areas of the design we identified in Step 2. Replace the Hello

World. text with the div’s below. Just for now we’ll also put text inside the divs for easy

visual identification when we view the page.


<div id=”main_navigation”>

<div id=” content”> Content </div>

<div id=” header  “> Header  </div>

<div id=” left_Sidebar”> Left_Sidebar</div>

<div id=” right_Sidebar”> Right_Sidebar</div>

<div id=”footer”>Footer</div>





Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: