Let's start with the most basic code that will help you in all kinds of layouts. Whether you plan to create your own shop, or simply want your story to look pretty, you will need to know how to create text boxes.

So what are text boxes? 

As the name suggests, they are boxes that contain text. There are two ways to do this, but I will be showing you how to use the < div > < /div > tags today.

The most basic code looks like this:

< div style="background:#ffffff;border:2px solid #000000;" > Enter desired text. < /div >

To give you this:
 

You can change the border color, size (width) and style of the text box by changing the values attached to the "border" attribute. The number in front of "px" determines how wide the border will be. Most borders will be anywhere between 2-5px. Don't go any higher in value unless what you are creating is proportional to the box you are making. 

Changing "solid" to dashed, dotted or double will change the appearance of the border. You can see what these look like by scrolling the outer box of this tutorial to the right. 

The # value is the html color code for the border. Change the six digit code to whatever color value you like. You can also use rgb color codes in the form rgb(xxx,xxx,xxx) where the x are replaced by the corresponding color values.

You can change the background color of the text box by changing the 6 digit # code for "background".

If you want to ensure that you don't accidentally change the wrong attributes during editing, you can also split these values up into border-style / border-width and border-color.

< div style="background:#ffffff; border-style:double; border-width:2px; border-color:#000000;" > Enter desired text. < /div >