box and lines

first let's do tutorial on box. this is easy and anyway, if anyone have a question to ask, just drop a message in the comment box. thanks..
remember to close the all the spaces in the text. alright?

boxes
 

• plain box - yeah, i'll just say plain box. 

to make a plain box, we had to use a div tags. perhaps i didn't mention a div tags. but tis important in coding. remember! dont forget div tags. 

this tag will start with opening div tags < div > and ended with closing div tags < /div >

--- to make a box, it is easy. 

< div style="width:20px;height:20px;background:#FF9900;"> & nbsp; < /div > 

it will look like this.

so the wider and higher the width and height, the bigger your box will be. so move onto next, that is text box.

this will have a padding tags and no padding tags in it because padding will create space between your wording and the border of the box while also expanding your box bigger than intended. so in case you wanted to do a 80px x 80px of a box and put padding in it, you can put padding:10px and have the width x height of about 60px x 60px.

for example;

< div style= "width:60px;height:60px;background:#FF9900;padding:10px;" >   ; < /div >

so this is how it would be. and move on.. we'll be making

• text box

making text box is easy just like making the box, we'll just need to put several tags.

for example. the font-family, font-size, color, text-align, line-height, sometimes even letter-spacing or text-transform. for text-align, theres just four of it which are justify, left,right or center. which you had already familiar with these right?
 

so lets get started. for neat text box, add padding. so here are the example.

e.g.
      < div style= "width:60px;height:60px;padding:10px;background:#FF99CC;font-family:calibri;font-size:10px;color:#ADFDFD;text-align:justify;line-height:10px; " >   text box alert! i love the color pair with this pink. this box looks edible to me. yum! ahah < / div >

now lets check out!

so this is it guys. the simple text box.

move on to lines.

• horizontal lines
• vertical lines.

moment of truth. years of living, i still unable to identify horizontal and vertical. sometimes left and right which makes me failing miserably in defence art. lols. so yeah, now move on.

• horizontal lines (googled already) the lines that goes horizontally. ​

for horizontal lines. you may put whatever width and height in pixel. however, you must not write the pixel for width and heights the same as it'll be rectangular or square. heh. so here is an example. small, average, huge.

• small

< div style =" width:600px;height:2px;background:#F9F009;" >   ; < /div >

• average

< div style ="width:600px;height:20px;background:#F9F0099; " >   ; < /div >

• huge

< div style="width:600px; height:100px;background:#F9F0099; " >   ; < /div >

yes, this kind of... 

• vertical lines (googled up) the lines that straightly standing

here is an example

< div style ="width:3px;height:300px;background:#F9F0099;" >   ; < /div >

this is very tall. hm.