{"id":58,"date":"2005-02-24T19:10:00","date_gmt":"2005-02-24T13:40:00","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/2005\/02\/24\/css-quick-tip-put-it-in-a-box\/"},"modified":"2020-04-24T15:02:52","modified_gmt":"2020-04-24T09:32:52","slug":"css-quick-tip-put-it-in-a-box","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2005\/02\/css-quick-tip-put-it-in-a-box\/","title":{"rendered":"CSS Quick Tip: Put it in a Box"},"content":{"rendered":"

This Cascading Style Sheets (CSS) tutorial allows new web designers to publish their site and quickly put anything is a box<\/strong>. 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.<\/p>\n

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.<\/p>\n

Put anything inside a box<\/span><\/p>\n

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.<\/p>\n

< SP AN style=”border:1px solid gray;padding:10px;background:yellow;”><\/span>
\nPut anything inside these tags
\n< \/SPAN><\/span><\/div>\n<\/blockquote>\n

You can change the parameters to your liking –<\/p>\n

border:1px solid gray
\n<\/span>
\nThe border width<\/span> is 1 pixels. Increase the value to thicken the border, decrease to make it thin.<\/p>\n

Make border 3px<\/span><\/p>\n

Make border 7px<\/span><\/p>\n

The border style<\/span> is solid line. You can also make it dotted, dashed and many more.<\/p>\n

Make border dotted<\/span><\/p>\n

Make border dashed<\/span><\/p>\n

The border colour<\/span> is gray. You can change it to red, blue and such a list of limited colours given below.<\/p>\n

Make border red<\/span><\/p>\n

Make border blue<\/span><\/p>\n

padding:10px;<\/span>
\nPadding signifies the space between the text and the border in pixels. If you keep the value low, the border will stick to the text.<\/p>\n

Make padding 1px<\/span><\/p>\n

Make padding 20px<\/span><\/p>\n

background:yellow<\/span>
\nBackground color refers to the background of this box. You can change it to any color you want.<\/p>\n

Make background red<\/span><\/p>\n

Make background green<\/span><\/p>\n

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.<\/p>\n

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.<\/p>\n","protected":false},"excerpt":{"rendered":"

This Cascading Style Sheets (CSS) tutorial allows new web designers to publish their site and quickly put anything is a…<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6,1],"tags":[49],"class_list":["post-58","post","type-post","status-publish","format-standard","hentry","category-blogging","category-tips","tag-tutorials"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/58","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=58"}],"version-history":[{"count":0,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/58\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=58"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=58"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=58"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}