Ted's Computer World HTML & CSS
Tips and Tricks

TEXT BOXES — AT YOUR COMMAND

You might have noticed that many of my pages feature a cutesy little quote near the top, horizontally centered and with a border, such as the one on the Computer Menu:

“There are 10 types of people in the world — those who
understand binary, and those who don't.”  — Ian Stewart

The box features a blue double-border, with the author's name italicized and reduced in size.  A line-break is positioned so as to make the result look best.  Of course, a single border might be preferred:

“Any idiot can put up a website.”  — Patricia Briggs

Sometimes, however, it is desirable just to enclose some ordinary text, perhaps for informational or instructional purposes:

The default textbox utilizes the current font and
its color.  These specs can easily be adjusted.

Each box is defined as an inline-block in CSS, because that is how to confine it to the size of the text.  Each must be wrapped in an outer container as well, because that is how to horizontally center an inline-block.

It is convenient to have the structure for these boxes pre-defined, so that implementing one becomes a simple copy-and-paste process.  The following classes (housed in ALL.CSS, of course) provide for three box types, a choice of blue or black text, and a selection of background colors:

*

Utilizing those classes, the three boxes are easily coded as follows:

*

Because the <div> centers everything as it is configured, the text in Box #3 also would be centered.  The inclusion of two additional classes left-aligns the text and reduces its size as well.

Although there are other ways to accomplish the desired effects, this method is pretty easy to use.  Define your own specifications, and enjoy!

Go Back