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 section Main Menu:

The box features a 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:

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

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

Because these boxes have several common features such as borders, padding, and text alignment, it is convenient to pre-define them as much as possible.  The following classes (added to ALL.CSS, of course) provide for three box types and a selection of text and background colors:

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

Because the <div> style now centers everything by default, the third 'textbox' needed an additional class to left-align the text; and another class reduced the text size as well.

Once set up, this system is pretty easy to use; but its usefulness is limited to a specific situation.  For the occasional display, a simpler method is available — should your mindset be amenable to it.

In the foregoing examples, a <div> structure was employed in order to enable the horizontal centering of the box, and <display:inline-block> sized the box to fit the existing text.  Yet since HTML 1.0, there has been a structure available that has both of those features built in!  It's called a TABLE.

What?  A table with but a single cell?  Sacrilege!  That should be enough to cause a CSS developer to foul his keyboard!  Nevertheless, the horizontal page-centering now is automatic, because that is the default specified for tables in our ALL.CSS; whereas text is not centered within the box unless that format is selected.

For general usage, it could be best to eschew default formatting, except for some cell-padding that presumably always would be wanted.  Rather than needing to remember or adjust any existing settings, one simply applies directly whatever classes are required for the currently desired effect:

Note that the resultant markup is utterly readable as to intent and is just as easily edited, even though it contains six formatting variables.  Welcome to Atomic CSS.

The optional usage of <q> here replaces the tedious <span> formatting for the author's name:

Many other things are possible.  For example, here's an easy way to get rid of the big ugly bullets generated by <ul> (as long as no indented line-wrap is needed), and have a pretty, centered box as well:

Judicious usage of a couple of other atoms is sufficient to produce this well-known algebraic brain-teaser:

Of course, these OOCSS techniques also could be applied to the <div> structure; but by now it's no secret that at Ted's World, we prefer to keep things clean and simple.