Grafica Designs

To follow this tutorial please start by reading Making a Div Layout - Part one


Right, let’s just cover the stylesheet which we have at the moment. The stylesheet gives the orders, remember? So we will cover the main orders that you already have in the style.css, we are just going to cover body and page today.

Now open the style.css in notepad or whatever you are using? Now right-click on the index.html file and open with firefox or Internet explorer if you don’t have the files I just said, then what are you doing reading this? Get back to Making a Div Layout - Part one. Ok, in the browser you will see a white page with black writing, as we make changes to the style.css after saving the style.css then refresh the browser and you will then see the change to the index.html.

The body is what it means if you put an order like a background colour or a font style and size, and then it will do it for anything you do within the layout. But as you use you div ids and class, you can still have control.

So let’s style the body and we can take a look at what each order does. Copy and paste this code over the body in the file you would have downloaded from Making a Div Layout - Part one.

body{
margin:0;
padding:0;
background:#000000;
text-align:center;
font-family:Tahoma, verdana, sans-serif, "Times New Roman";
font-size:12px;
color:#ceb9d2;
}

Margin

So let’s talk about margin, well here you see I have put margin:0; this mean that there will be no margin for the body at all, but what if you wanted a margin at the top? Well, why not put this

margin: 20px 0 0 0;

Now you will see that the layout has moved down from the top. So you know a margin means a ruler margin.
Ok the
margin:20px 0 0 0;
is
margin: top right bottom left;
but remember that if you give a number always put px at the end of each number and if you want zero margin then it’s just 0
Now if you want a margin that’s up to you? If not put it back to margin:0;

Padding

Padding is used a lot when it comes to making space and moving the layout text and images around, the rules are the same like margin. So say you put padding:20px 0 0 0; then like the margin it will be the same, but padding: top right bottom left;
But we are not having any padding here, so after a play, put it back to padding:0;

Background

background:#000000; this means that the background colour of the whole page is black, when making a layout make sure that the colour matches your theme. You will find many number (Hex) for colours, I will post some links later that will help.

Text-Align

text-align:center; easy really, it makes your text centred, you can also have text-align:left; text-align:right; and text-align: justify; justify we will use later and make the text look neat, we are using text-align:center; in body just now, for Internet explorer reasons.

Font-Family

font-family:Tahoma, verdana, sans-serif, “Times New Roman”; this give a list of styles of text, always best to have a few, so if someone does not have one of the fonts in the list, it will use another that is.

Font-Size

font-size:12px; this is the text size, so going up to say 14px makes it bigger and going down to say 10px; make the text smaller. We are going to use 12px as it’s a nice size for the fonts we have picked.

Color

color:#ceb9d2; this will be the colour of the font, so always make sure it is easy to read on the background colour you are using.


Ok, now copy the below over the page we already have

#page{
margin:0 auto;
width:800px;
text-align:left;
background:#0e050f;
border:1px #2c0f2e solid;
}

Now this will style just the main layout area where our layout is, so let’s start

Margin:0 Auto

margin:0 auto so we will have no margin and the page is going to be centred.

width

width:800px; this is how wide our layout is going to be, if you did not want to limit the width then you would put width:100%; and you would not then centre the layout.

Text-Align:Left

Now we used this text-align:left; for yet again, Internet explorer can be very funny when it comes to getting the layout centred so we had to put text-align:center; in the body, but we don’t want all our text centred so now we want our text to go to the left.

Background

background:#0e050f; let’s make our page another background colour, but not too light ok, we want to see the text.

Border

border:1px #2c0f2e solid; now this will give the whole page a border, but there are other ways to this as well, get rid of the border:1px #2c0f2e solid; and copy the below and put it in the page bit then save and take a look.

border-top:1px #2c0f2e solid;
border-left:1px #2c0f2e solid;
border-right:1px #2c0f2e solid;
border-bottom:1px #2c0f2e solid;

You see the border is still there, and you can remove border-top:1px #2c0f2e solid; and it will disappear, cool hey? Ok not that cool, but it does help if you only want one border doesn’t it. You can keep it like that if you want or remove it and put back the border:1px #2c0f2e solid; Oh you don’t just have to used solid, there is dotted, dashed and many more.


We are really going to have to this in parts as it’s a long post, but this gives you something to mess with for now. Here is a link to help you when coming to colours and the numbers. HTML Colors.


Nope, I’m not giving you a download; you have to do this for yourself, that’s the only way to learn.


Making a Div Layout - Part one
Making a Div Layout - Part two
Making a Div Layout - Part three
Making a Div Layout - Part five

Tags: div, How to make a div layout, html, tutorials

Related Entries

• Making a Div Layout - Part two
• Making a Div Layout - Part three
• Making a Div Layout - Part one
• Making a Div Layout - Part five
• So Sorry