Box model

Introduction

The box model within HTML is how the content and the area around it is defined. There is the content itself, paddings, border and margin’s. Each one can be altered and also each part of the top,bottom,left and right.

Image of the box model

box model in HTML
box model in HTML

Green : content
Blue : padding
red : border
yellow : margin

How to alter the each aspect of the model

To alter the margin for example you just need to define the actual HTML object that you want to “talk” to, so lets define that first.

<div id="alterhere">
hi there this is the content
</div>

and then to talk to the HTML object you just select it ( if was a class then you use “.” or if it was a id then use “#”, the way that I remember is that “.” is like class method call in c++/java/c# etc and “#” is what you could call a variable).

#alterhere 
{
margin : 20px;
}

means to have a full margin of 20px (pixels) but to pull out just the left part to be bigger then

#alterhere
{
margin-left : 50px;
}

so the margin left will now be 50px instead of 20px. You can do the same for padding as well, padding-left, padding-right, padding-top, padding-bottom.

Conclusion

The box model is very nice and also allows you to fully control the content and the box around it.

HTML + CSS

An Cascading Style Sheet (CSS) is basically styles of a page within a block of text. The cascading part means that the last value for a set style will be the value taken, e.g. if at the top of a style sheet there is a value of black for the back ground colour and then white is below that, the white value will take precedence over the black.

Here is a example of styling within the tag body.

<html>
       <title>Background colour</title>
       <body bgcolor="#BCBCBC">
              hi world
       </body>
</html

And this is an example with CSS within the html code.

<html>
       <title>Background colour with css</title>
       <style type="text/css">
              body 
              {
                     background : #DCDCDC;       
              }
       </style>
       <body>
              Hi World
       </body>
</html>

There are many styles options within the html styling list, hopefully shall cover most of these in the future.

Hello World

The (X)HTML uses tags to describe the area of the page, e.g. title tag means the title of the page. The below code displays “Hello World” in the page and the title of the page is “Hello World Tutorial”.

Cut the code from here

<html>
<title>Hello World Tutorial</title>
<body>
Hello World
</body>
</html>

if you save that as helloworld.html, and then open up the saved page with your browser of choice.