This can be done with the code (tags) HTML div. DIV is an HTML code that will produce a block of paragraphs, I usually termed Box. Because by writing paragraphs or sentences between tags <div> ....</ div>, then the sentence / paragraph terseut will appear in the box that we can set the appearance. For simplicity, the following examples and the use of DIV tags.
color and background
This box is to use the following HTML code:
<div style="color:red;background:yellow;"> ... </ Div>
Consider the following style. part that determines the display box by using a DIV. The above code uses two attributes, namely color and background. Color determines the color of text and background to determine the background color. Note also the writing of colons and semicolons.Color attributes can be filled with writings such as: black, blue, green, yellow, red, white and other. Can also use the Hexadecimal code, eg # FFFFFF for white # 0000FF for blue and others. To facilitate choosing the best color, can use a free program ColorPicborder
In kotax / box before, the yellow color seen without border. It would be interesting if we meambahkan border around it. This can be done by adding the border attribute. Examples are as follows:
This box is to use the following HTML code:
<div style="color:blue;background:#EBF3FB;border:1px #AACCEE;"> solid ... </ Div>
Explanation of the value after the border is as follows: 1px indicate the line thickness (1 pixel is a thin line), solid is the form or appearance of lines and color lines # AACCEE is. Each separated by a space.
To form (style) border in addition to solid, also could be worth none, hidden, dotted, dashed, double, groove, ridge, inset, outset and inherit. Examples of each can be seen tutorials CSS border
padding and margins
In previous papers in a box box looks too close to the margins (both left, top, right or down). In order to look more beautiful, the writing can be made to have the distance to the border (more protrudes into). This can be done by adding the padding attribute. Here's an example:
This box is to use the following HTML code:
<div style="color:#990099;background:#ADE4AD;border:2px dashed #006600;padding:5px;margin:10px;"> ... </ Div>
Value padding: 5px, it means writing in the box go into all the 5 pixels (1 pixel is a thin line). Actual value could be filled more detail for example padding: 2px 3px 4px 5px, which means the distance from the line of 2 pixels, 3 pixels from the right, below 4 pixels and right 5pixel. The sequence of the upper-right-down-left.
For almost the same margin to padding, except for margins determine the distance the box to the area outside it (from the margins out, start up-down-left-right). In the example display above (in green), protrudes into the position box appears. Because the margin: 10px, then position the box as far as 10 pixels from the top, right, bottom and left. Charging can also be done as paddingwidth (width of box)
With the code as above, then the box will be as wide as the length or area of available content. To limit the width of the box, we can use the width attribute. Here's an example:
This box is to use the following HTML code:
<div style="color:#FFFFFF;background:#FFD4AA;border:2px dotted #FF2A00;padding:5px;margin:5px;width:300px;"> ... </ Div>
Width property will regulate and limit the size of the box. in the example above, its value is 300 pixels. Actually there are many other attributes that could be included, but while the six attributes above is enough to make writing more informative (with a selection of the right color of course).
One thing to note when writing code (in writing the article) is to be in HTML mode, not in visual mode.
Create interesting information box on your blog
4/
5
Oleh
Agus Prasetyo
