CSS Quick Tip: Put it in a Box

By Posted 2005 Updated   Tutorials

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:10px;
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:yellow
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.


One comment on “CSS Quick Tip: Put it in a Box

  1. Robert says:

    Current releases of Firefox, Safari, Mozilla, Opera, Omniweb – all are much more Standards Compliant than MSIE. Correctly written CSS works fine in those browsers.IE hasn’t been updated for way too long.Its behavior doesn’t follow w3c recommendations, and has buggy behaviors with some uses of CSS. Read some Eric Meyer and/or Zeldman. Yeah, CSS will yield unexpected results if not properly written. Start slow, build up to more complexity, validate early and often!

Leave a Reply

Your email address will not be published. Required fields are marked *




css.php