Around the Web in Eighty Kilobytes

	Sign In Sign-Up

Old Issues

PreviousIssues : 15 - July 14

Welcome to Nathsite's weekly 'Around the Web in Eighty Kilobytes', a 20-part free guide to building a website of your own, and using the web well.
To stop getting ATWI80KB's, send an empty email to atwi80kb@homepage.com with 'NO MORE THINGIES' as the subject. To look at examples and previous ATWI80KB's, go to http://atwi80kb.homepage.com

AROUND THE WEB IN EIGHTY KILOBYTES 1.29 - 1.30
   ATWI80KB 15

July 14, 2000

1) Margins
2) Aligning etc.
Example

1) MARGINS
   Around every object in an HTML document is a bit of 'padding', and around the padding is a 'margin'. They are effectively the same thing in most browsers.

   There are four main margin properties:

'margin-top'

'margin-bottom'

'margin-left'

'margin-right'

You can specify one or more of these properties, or none. For ones not specified, the browser will just use its default setting.

   There are also four main padding attributes:

'padding-top'

'padding-bottom'

'padding-left'

'padding-right'

Padding and margin are used in the same way and do the same thing, except in a few browsers where padding things do nothing, as it isn't supported as well as margin properties. It's better to use margin properties instead of padding.

   You can specify margins in:

px (Pixels)

pt (Points)

em (Uh.... Em things)

mm (Millimeters)

cm (Centimeters)

in (Inches)

% (Percentages)

You can give margins negative values. I'll show you how to make things overlap properly next week.

In a few browsers, including Netscape, there's a 'border' in between the margin and the padding whose style you can control. To control borders, you have 'border-width', 'border-color' and 'border-style'. 'border-style' can be 'solid', 'double', 'dotted', 'dashed' or a couple of other things, but I'm not going to explain borders in detail so never mind.

2) ALGIGNING ETC.
   You can align things with 'text-align'. Indenting is done with 'text-indent'.

'text-align' can be 'justify', 'center', 'left' or 'right'.
eg. p { text-align: justify }

'left' and 'center' are useless, because it's easy to do those with HTML.

'text-indent' controls the first line of a paragraph. You can specify them in pixels (px), Points (pt), Em (em) etc. Percentage can be used, but it sometimes causes problems.
eg. P { text-indent: 1cm }

You can give something a negative 'text-indent', too.

There are a couple more properties - 'float' and 'clear', but they aren't very well supported.

'float' can be 'left' or 'right' and does nothing in particular. Well, it actually makes text float, but that can be done with tables, too, so it's better not to use this.

'clear' prevents text from wrapping. This can also be done with tables, so it's not a good idea to use this, either.

How 'float' can be done without stylesheets:
<table border=0>   <tr>    <td>Write the floating text here</td>    <td>Start the normal text here</td>   </tr>   <tr>    <td rowspan=2>Continue the normal text here</td>   </tr> </table>
'clear' is done the same way, except that you leave the 'Start the normal text here' blank and start the normal text where it says 'Continue the normal text here'.

The only purpose for 'float' and 'clear' I can think of is to use them with 'A:hover'.

EXAMPLE
<html> <head> <title>CSS is not a stupid name for CSS</title> </head> <style type="text/css">  </style> <body link="#FFFFFF" alink="#FFAAAA" vlink="#FFFFFF" bgcolor="#FFFFFF"> <font face="verdana, arial, helvetica"> <hr><br> <H1>Good Fences make Good Neighbors</H1> <div> Against the Motion </div> <p> <span>"T</span> here were no countries, states or walled-off cities before humans came along. No tall stone walls stretching to the horizon. No tired looking men checking suitcases at countries' borders. Animals were free to go practically wherever they wanted and do whatever they wanted. Apart from the odd territorial gorilla, no one tried to change that.</p> <p> And then came man, with his walls and boundaries. A piece of land is a piece of the earth, a piece of nature. Nobody can own nature, but people buy and sell it like they do.</p> <p> Lines on little maps divided the earth into countries one couldn't freely go in and out of. People were given a nationality depending on where they happened to have been born, and grew up being taught to like it. People of every country started to believe they were superior to all others, and this feeling has probably led to all wars since the first tribe of Stone Age Neanderthals found another tribe in its hunting ground and attacked it.</p> <p> If people weren't divided the way they are, there would be fewer major wars and resources all over the world could be used together for better things.</p> <p> After all, nature wasn't designed to have boundaries, and man was designed to be a part of nature.</p> <br> <p>Uh... wasn't I meant to be <i>For</i> the Motion? I guess I'll have to start again..."</p> </font> </body> </html>

See you in a week!
Aniruddh Nath

Email questions to atwi80kb@homepage.com - I'll reply if I have time. I might write stuff from your email in later ATWI80KB's.
NOTE: I'm not responsible for any damage done to your computer because of this tutorial.