Chapter 5 : CSS Divisions

Posted by Muhammad Shiraz Kamboh Sunday 27 May 2012 0 comments
Ok so you have finished the first 4 chapters in my series. You have learned the very basics of CSS, how the syntax works and a bit about classes and IDs. Now we are gonna take a quick break from CSS and focus on the (X)HTML side of using it.

Divsions

Divisions are a block level (X)HTML element used to define sections of an (X)HTML file. A division can contain all the parts that make up your website. Including additional divisions, spans, images, text and so on.

You define a division within an (X)HTML file by placing the following between the <body></body> tags:
<div>
Site contents go here
</div>
Though most likely you will want to add some style to it. You can do that in the following fashion:
<div id=”container”>
Site contents go here
</div>
The CSS file contains this:
#container{
  width: 70%;
  margin: auto;
  padding: 20px;
  border: 1px solid #666;
  background: #ffffff;
}
Now everything within that division will be styled by the “container” style rule, I defined within my CSS file. A division creates a linebreak by default. You can use both classes andIDs with a division tag to style sections of your website.

Popular Posts

About Me

My photo
I create this Blog for learn the all kind of tutorial about web developing | HTML, Java, PHP, Graphic designing, Corel Draw, Photoshop, Micromedia Flash, Swish and many more related software and internet programming tutorials.

Followers

Blog Archive