CSS-Divisons

This is one topic which I promised I would be explaining in detail. As the name suggests, it has go to do with dividing a space into different sections. We do this in order to effectively organize content in a web page. This is a slightly large topic and today I would be giving you an overall picture on what it is all about.

Let’s start with an example which would Illustrate how Divisions are applied on a web page.

Capture

So, what you see above is a basic layout of a web page. It contains the header, a body and a footer. As you can clearly see the whole page has been divided into 3 sections. This is done by using the concept of divisions. It is actually a kind of tool which a web designer could use while designing a web page.

Before applying the divisions concept, we should be clear on how we are going to divide the page. So, once we have decided that, the next thing to think about would be the order of sections. In this case I decided that I need to have 3 sections- Header, Body and Footer. And then I wanted the Header to be on top, followed by the body and then the footer.

In order to implement an order, we would need to use HTML. It is a markup language which would help you to design the content of a web page. Whenever we are using divisions in coding, it is abbreviated as  div. So, don’t be surprised  if you see this word  somewhere.

We can apply divisions in two ways- By Using a Class or an Id. I will explain what each means a little later.  This is what I wrote in HTML, to design the page. Have a look.

Capture.PNG

Let me explain what this means. As you can see there are 3 divisions abbreviated as div. Each one represents a section. The first one is the header followed by the Border and finally the footer. Please Note that the order is very important. Let’s see an example where I inter change the order.

Capture

See the difference? I just made a minor change to the HTML. And the whole structure has been re-ordered!

See what I wrote-

Capture

As you would notice, I pushed the Header Division down and brought up the Body Division.  And as a result has made a significant change to the web page just by changing 1 line of code!

Compare the two results-

The one I wrote earlier

Capture

The one I wrote now

Capture

 

Let me formally explain the syntax of division

For HTML

<div id/class> Content</div>

Where

div-Division

I will explain id and class in my next blog

For CSS

id/class{

}

The content in the curly braces is basically the action being applied on the Section. You can apply colors, set the height and width and many more things.

Will see you tomorrow!

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s