How to Create Simple Box Content Using CSS | CSS For Bloggers: Part 3

In our last lesson we talked about ID Selectors and how you can use them to make unique blocks of content. These "blocks" have several applications. Maybe you want to create a welcome box that starts at the beginning of your posts to welcome new visitors to your blog?

You may want to create a box at the end of your posts to put more information on how users can subscribe to your RSS feed. In fact the possibilities are endless and with CSS. You've never had this much control on adding elements like this to your blog, that is, if you know how.

Having a few custom-made boxes to fill content into on hand can be very useful and I use them heavily on my blog. Creating one is simpler than you might think once you know the basics.

Box Creation 101

Today we are going to be creating a block-level box to store some simple information you may want to highlight from the rest of your content. Block-level essentially means it doesn't fall inline with other content, meaning that it creates a break in the page before and after it. Therefore if you have two boxes in your code they will stack on top of each other as opposed to one right next to the other.

A good example of one of these type of boxes is the gray box you see below that holds my example CSS code. What we will be creating today is no different. Once you learn how to make a box you'll find so many different ways to use them.

For today's tutorial I strongly recommend that you do this along with me in your own HTML editor or blog post. That way you can mess around with the different values to see how it behaves.

A very simple box... Indeed.

The CSS:

#verysimplebox
{width: 200px;
height: 200px;
background-color: #ffffaa; }

The HTML:

<div id="verysimplebox">Here's my box</div>

The Result:

Here's my box

Not the best looking thing in the world is it? Luckily CSS offers up many ways to customise this simple box to look however you would like. We'll spruce it up in a minute, first let's look at what we did.

The Breakdown:
We made an ID selector and named it verysimplebox we then added it to our blog using the HTML div tag and told the browser the ID was verysimplebox.

We made it a perfect square by using the width and height properties. You can of course make it however tall or wide you would like. Rarely you will make a perfect box most will be rectangles but hey I said simple right?

After that we colored the background a "post-it" like color yellow with the background-color: property.

All we have done so far with the CSS is designated the area where the content will go with the width and height. As of now it is in fact only 200px wide, once we start adding more to it like borders, padding and margin this will be added on to the 200px and make it wider. I'll explain later.

Let's see what else we can do with this box!

Border

Let's make our box have a nice thick border so we can clearly see it apart from our page and give it a bold look..

#verysimplebox
{width: 200px;
height: 200px;
background-color: #ffffaa;
border: solid 3px #000000; }

Here it is with some bordering!

For the border we made it a solid 3px thick line. There are several border styles to try.

• dashed
• dotted
• double
• groove
• hidden
• inset
• none
• outset
• ridge
• solid

What a difference a little border control can do, let's keep going.

Padding

For those of you already familiar with HTML tables this should be easy to understand. Padding is essentially the space inside the box from the inside walls. Think of our box as a room and our text is a prisoner we trapped inside. Well, our text is a bit crazy so we want to make our room a padded room. Our text is just huddled up there in the corner, he might hurt himself. Let's get the text off the wall using padding.

#verysimplebox
{width: 200px;
height: 200px;
background-color: #ffffaa;
border: solid 3px #000000;
padding: 10px }

Alright already, I'll move!

As you can see our text moved away from the corner, about 10px to be exact. It moved because we set the padding to be 10px thick all the way around the room. But what if we wanted to put only padding on the left and right walls?

padding: 0px 10px 0 10px

*The first value is the top then it goes clockwise: top, right, bottom, left.

This way you can control precisely what padding goes where. Also, when a 0 value is set in shorthand you can leave off the "px" and just have a 0.

Margin

While padding adds space inside of the box, margins act in the same way to add space outside of the box. This is helpful because it saves time creating that space needed by building it into the CSS rather than having to put a page break in there yourself using HTML. It is especially handy when working with CSS elements and images and you might need to shrink certain areas up.

You can add margin much in the same way as padding:

margin: 0px 0px -5px 0px

or

margin-right: 10px;

Notice how I used a -5px to remove space from the bottom of the box. Most all values you input in CSS must be positive numbers but in the case of margins it allows you to use a negative value for space removal.

Figuring out the total size of the box.

If we look back at our idea of our box being a room what would be the total size of the room from end to end? We set the width to 200px but this does not mean the entire box is only 200 pixels wide. Remember, we added a border, padding and margin. All of these factor into the total size, the begining width only sets the content space.

Therefore 200px width + 3px border + 10px padding + 10px margin = 246 pixels wide. Don't forget, you have both sides of the border, padding and margin to add to get your total width.

When making content boxes it's important keep in mind the total workspace you have for your blog posts. You can find this out usually by viewing your templates CSS code.

You can get into some crazy math situations in CSS and sometimes things don't turn out quite as planned unless of course you're a CSS guru and know all the nuances and rules. If something gets flubbed up there's usually some sort of work around. It's a lot like speaking a foreign language, but very badly. The listener (your browser) can understand you enough to make things work (find the bathroom), but it's definitely not the right way of doing it and this could lead to your CSS design looking totally different on another browser. It's important to test things out thoroughly before they go live on your blog.

A word on the height property.

It is generally recommended that you do not set a height for your boxes as it's limiting and makes the browser work harder. In some cases your content can spill out of your box. This goes in hand with what I was saying in the previous paragraph things can go hay wire, box heights are a one of those culprits. Due to IE's browser incompatibilities with CSS it's best to steer clear of setting a height when you can, except when using images since you know an image's exact dimensions.

Until next time.

Next time we'll learn about how to "float" content boxes and images in your blog posts using a class selector and applying it to whatever image we ant to float. This will allow you to nicely wrap content around an image using only CSS.

CSS For Bloggers

• How CSS Can Help Improve Your Blog and Tag Selectors
• Learn About Class and ID Selectors
• How to Create Simple Box Content Using CSS
• How to Align Images in Blog Posts Using Float
• Create Attractive CSS Text Effects
• Learn The Anatomy Of A Blogger Template
• How To Identify CSS Elements On Any Template Easily

Get Full Updates Subscribe to our RSS Feed with full posts via Feedburner