Boxing Text for Style

This site uses JavaScript to provide the normal navigation menu and some other important features as well. If you do not have JavaScript enabled, your experience with this site will be sub-par. The non-JS menu which you can see will get you through to most of the content, but if you are also using a text-only browser, note that some sections of the site are focused on images and will be disappointing to you.
Sorry for the inconvenience.

Boxing Text for Style

DISCLAIMER
I am fully aware that the entire staff of a school district has more important things to worry about than this tiny style issue, especially during the COVID-19 epidemic. They are doing ridiculous amounts of preparation to get schools ready for what will definitely be a strange year ahead!

This article addresses my more personal and generic concern about web design style.

I get emails with html code all the time. Some are even laid out like newsletters. I got one recently from our local school district. I cringe when I see text highlighted with a background color like this example (which simulates text in a narrow column in which the original occurred):

THE KMS/BROWN CAMPUS IS
CLOSED TO THE PUBLIC UNTIL
FURTHER NOTICE.

The code for the above was extracted from the page. The default font was set to a sans serif style.


<div><span style="font-size: 16px; color: rgb(14, 14, 14); background-color: rgb(242, 235, 43); font-weight: bold;">
THE KMS/BROWN CAMPUS IS CLOSED TO THE PUBLIC UNTIL FURTHER NOTICE</span></div>

The issue also applies to regular web pages.

Perhaps the jarring look is intentional. Maybe people would overlook the information if it were better looking. Still, I would prefer that it had been done differently, such as with a box containing the block of text.

THE KMS/BROWN CAMPUS IS
CLOSED TO THE PUBLIC UNTIL
FURTHER NOTICE.

The change was accomplished simply, by applying the style to the whole <div> instead of to the <span> enclosing the text...eliminating the span altogether.


<div> style="font-size: 16px; color: rgb(14, 14, 14); background-color: rgb(242, 235, 43); font-weight: bold;">
THE KMS/BROWN CAMPUS IS CLOSED TO THE PUBLIC UNTIL FURTHER NOTICE</div>

The above "improved" version doesn't even offer any padding...something I think adds value, so here it is the way I'd prefer.

THE KMS/BROWN CAMPUS IS
CLOSED TO THE PUBLIC UNTIL
FURTHER NOTICE.


<div> style="font-size: 16px; color: rgb(14, 14, 14); background-color: rgb(242, 235, 43); font-weight: bold; padding:10px 0px 10px 0px;">
THE KMS/BROWN CAMPUS IS CLOSED TO THE PUBLIC UNTIL FURTHER NOTICE</div>

Note:
If you examine the actual HTML for this page, you will see it has line breaks added in order to simulate the narrow column layout of the example from the school district.