This project was an invitation, intended to make us use the CSS box model. The assignment used an in-line style sheet rather than an external one. In completing the project I had two problems. The constraint of an inline style sheet wasn’t a good fit for the assignment and I had challenges dealing with the border attribute of the box model.
Web designers will debate forever how to decide which projects can use style attributes attached to content elements, which need inline style directives, and which are “big enough” to justify external style sheets. It seems obvious that multi-page sites need external style sheets, so one can apply the same styles to multiple pages. This brings us to the single web page and whether to use an inline sheet, or styles attached to each element.
The benefits of inline style sheets emerge when styles are reused in a document. Rather than copying the style attribute over and over again, the designer can change it once. Unfortunately, this was not that kind of document. It was short and had minimal reuse of styles. Style attributes on individual elements would have been adequate to the task. Perhaps it’s a bit much to call this a problem, since the parameters were driven by the assignment learning outcomes rather than the needs of the particular design task.
My second problem was all about borders. The W3C sandbox to which we were referred showed a nice green border. When I modeled my style sheet on that example — no border. Since we were restricted to a nearly featureless text editor, I wasted time looking for missing punctuation and unclosed tags. That was not the problem.
Like most web designers it was off to search engines. It turns out that there is a border-style attribute included in the box model, but not shown in the W3Schools sandbox. The default value for border-style is “none”. When I added a border-style=solid attribute to my div style declaration, voila , a border. I was reminded that even normally trustworthy sites can have glitches.