Hint: I always use http://htmledit.squarefree.com/ to code!

How to add a text box with a scrollbar:

<div style= "height:200px;width:200px;border:3px solid #CCC;font:16px/26px Georgia, Garamond, Serif; overflow:auto;">TEXT HERE!</div>
TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE!
As you can see, once there's enough text in this box, the box will grow scroll bars... that's why we call it a scroll box!

How to add colored text in the box:

<div style ="height:200px;width:200px;border:3px solid #ccc;font:16px/26px Georgia, Garamond, Serif; overflow:auto;color:red;">
TEXT HERE!</div>
TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE!
I used red as the text color to this HTML scroll box. 

How to add background color to the box:

<div style ="height:200px;width:200px;border:3px solid #aaa;font:16px/26px Georgia, Garamond, Serif; overflow:auto; background-color:pink;color:black;">
TEXT HERE!</div>
TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE! TEXT HERE!
I used Pink as a  background color to this HTML scroll box. 
You can also customize these boxes by doing the following:

  • Make the box bigger or smaller by changing only the numbers in: height and width.

  • Make the border size bigger or smaller by changing only the number in: "border:3px"

  • Change the color by inputting the HTML color code in: "solid #CCC" (See "Adding Colors")

  • Change the size of the font by changing the numbers in "font:16px/26px Georgia, Garamond, Serif".
 
  • You can also change the font itself by putting the code in "#CCC;font:16px/26px Georgia, Garamond, Serif; overflow:auto;" (See "Adding/Editing Text")

  •  You could also place an image into the scroll box. (See "Adding Images & Resizing")