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.