A crash course in the absolute basics of CSS-based design.

View this page's html file and css file

Spacing and sizing.

Just a few more block element tweeks. Getting that much needed space betwix your text and the edges of your page/blocks/images, and making images bigger from the CSS. The surprises never stop!!!

spacing - sizing

Need some space?

Now we will work with Padding and Margins. The difference is pretty easy to comprehend now that we have looked at borders. Padding is the white-space from the border to the elements within the box, whereas the margin is the white-space between the border and elements outside of the box.

By default, if you do not specify a margin for your web page, your browser will do it for you. This space varies from browser to browser, but is usually fairly small in size. Well, just for a visual, and for fun, we want the pages margin to be HUGE, so lets do it. Target the BODY and pull the characteristic “margin” and define is as 200 pixels.

body {
font-family: Arial, Helvetica, sans-serif;
color: #000066;
font-size: 12px;
background-color: #FFCC99;
margin: 200px;
}

Man, this page is getting really messed up, but it is... interesting. No? It is even possible to change the margins and padding of our paragraphs. To illustrate the difference, we shall target each paragraph individually, and define padding for one, and margin for the other, just for fun.

Target the paragraph with an ID “p1”, pull “padding” and set it to 50 pixels. Now target the paragraph with the ID “p2” and set it’s “margin” to 50 pixels.

#p1 {
padding: 50px;
}
#p2 {
margin: 50px;
}

Eye opening? Thought so. You can even pull the “padding” or “margin” for a particular side, much like with the border, by pulling “margin-top” or “padding-left”.

top

Size matters.

Particularly useful when targeting a specific Class or ID, are the “width” and “height” characteristics. These are ideally suited for DIV and P elements, but also work well with pictures and most block elements. A practical use for them outside of complex layouts, is to resize large or small images.

We have a small image on our page, and want it bigger. Mario. Don’t ask me why he is on our page, I don’t even know... It’s late. Any way, he is teensy, and he is actually much larger than that. So lets make him 300 times bigger. Our trusty calculator says that 300 times bigger will put him at 48 pixels wide by 84 pixels tall. His ID is “mario”, so lets target it, pull both “width” and “height” and define them as appropriate.

#mario {
width: 48px;
height: 84px;
}

Easy, now he is much bigger, and look! He is giving you the peace sign!

While we are here, we will “float” him to the “right”. Floating is much like “text-align” except it actually places the box, not the text within it.

#mario {
width: 48px;
height: 84px;
float: right;
}

A problem with this is (as you will notice) “float” does just that, it floats the object, which in some browsers will cause the object to stick beyond the bottom on the block it is in (notice how Mario’s feet are outside of the boarders). Saddly, this is but a point of interest, and we can not get in to how to fix this, so work around it for the time being.

top