In the 6th installment of Bart Busschots’ Programming by Stealth series, he introduces the concept of CSS to allow us to format our html pages. He gives us an overview of terminology, explains the different ways to add CSS to an HTML document, explains the basic syntax, and finally gives us some examples of text attribute changes. You can find his detailed shownotes at pbs.bartificer.net/….
Also note that he’s now created a short url for us to be able to see all of the Programming By Stealth tutorials all in one place (along with an adorable logo) at http://bartb.ie/pbs.
Words, letters, and text
Hi guys,
Just a few thoughts on this week’s CCATP.
First, Bart seems unsure why CSS sometimes uses “font”, and sometimes “text”.
This is a terminology thing: “font” refers to letters, their spacing between letters, shape, size, etc. “Text” is more general—it’s about the shape of the article—how wide a paragraph is, space between lines, etc. Basically, if you zoom into a pair of letters, you can tell a lot about the font, but little about the text.
So why is “decoration” a text attribute rather than a font attribute? I think this is to do with the fact that bold and italic have long-standing presence in typography. Italic is used for emphasis; bold for stronger emphasis. Underline and its friends, overline and strikethrough, largely have come about in the last century, as typewriters would have had to have four times as many characters for each key—one for normal, one for italic, one for bold, and one for bold italic. Underline was introduced as a shorthand for emphasis, because it was more convenient to have one extra character that would draw a line under each letter typed. Because it was so prevalent, it became standard for emphasis, but it’s not part of the typographic tradition the way that italic and bold are.
Incidentally, Allison, that’s why Markdown doesn’t have an underline option: underlining is generally considered bad typography.
The other thing Bart mentioned is that the inventors of CSS “made up” the word “specificity”. It’s a new word, but not that new: Google Ngram viewer has it going back to the mid-nineteenth century, and coming into common usage in the twentieth (with a sharp increase starting in the 1960s).
Lastly, Allison asked if monospaced fonts can be serif or sans serif—I haven’t looked into this, but I believe serif is far more common, simply because letterforms like lowercase i and l would be surrounded by empty space (because of their narrowness), which can trick the eye into thinking there’s a space there.
With Bren’s absolutely ginormous Comment, my relatively large comment will look tiny. But anyway, here goes.
Futura! Always use Futura! Anyway, so if you find Bart’s explanation of Serif, Sans Serif, and monospace inadequate, which you won’t, look at mine instead. Sans Serif (without Serif) means no overhangs. Look at the letter.—> T <—, specifically the top. See the overhangs? Those are Serif(s) Serif or Serifs? I dunno. Anyway, Sans Serif means none, or nothing! So no Serif(s)! Monospace, as you can probably guess, has mono, or same spacing. So even if the width of the letter isn’t the same, the spacing will fix it so that 10 characters, for example, is always the same width as ten characters.