CSS Quick Tip: Put it in a Box

This Cascading Style Sheets (CSS) tutorial allows new web designers to publish their site and quickly put anything is a box. It is meant for beginners of html and css web designing their first web pages who are still figuring out the complexities of tables, and css div tags.

We have the SPAN tag to your rescue. Just put whatever text, images etc. it inbetween these tags, and it puts your stuff inside a css box. No need for complex table web design arrangements or linked cascading style sheets or div and class tags.

Put anything inside a box

This is the simple code for the box above. Just put the css span tag above and the closing span tag below you matter and you have a box.

< SP AN style=”border:1px solid gray;padding:10px;background:yellow;”>
Put anything inside these tags
< /SPAN>

You can change the parameters to your liking –

border:1px solid gray

The border width is 1 pixels. Increase the value to thicken the border, decrease to make it thin.

Make border 3px

Make border 7px

The border style is solid line. You can also make it dotted, dashed and many more.

Make border dotted

Make border dashed

The border colour is gray. You can change it to red, blue and such a list of limited colours given below.

Make border red

Make border blue

Padding signifies the space between the text and the border in pixels. If you keep the value low, the border will stick to the text.

Make padding 1px

Make padding 20px

Background color refers to the background of this box. You can change it to any color you want.

Make background red

Make background green

Remember: Only 16 color names are supported by naming them – aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. If you want more customized colors, then there is a choice of hundreds of three or six unit codes e.g. #ccc will give you a light gray and so on.

There are several hundred’s of tags to get your boxes looking smarter and most customized, but that is not the aim of this article. This is a very simple way to get you started on your first box. I hope you find these tips handy.

Share with friends

About the Author: P Chandra is editor of QOT, one of India's earliest tech bloggers since 2004. A tech enthusiast with expertise in coding, WordPress, web tools, SEO and DIY hacks.