Styling text using CSS

HTML is intended as a structural markup language, but the Web’s increasing popularity meant it got “polluted” with tags designed for presentation. This made HTML more complex than it needed to be, and such tags soon became a headache for web designers trying to style page elements, such as text. In the bad ol’ days (the end of the 1990s), you’d
often see source code like this:

<font face=”Helvetica” size=”3″ color=”#333333″> This markup is <font size=”+3″><small>really </small></font>bad, but it was sort of  the norm in the 1990s.</font>

WYSIWYG tools would insert new tags to override previous ones, adding to the page weight and making it tough to ensure visual consistency site-wide. By and large, CSS eradicates these problems and enables far more control over text, as you’ll see in the following sections. This is a boon for graphic designers who used to loathe HTML’s lack of typographical control. However, the level of freedom evident in print design still isn’t quite so on the Web.
Restrictions imposed by browsers and the screen must be taken into account, such as it being harder to read type onscreen than in print. This is largely related to resolution. Even magazines with fairly low-quality print tend to be printed at around 200 dpi or more— more than twice the resolution of a typical monitor. This means that very small text (favored by many designers, who think such small text looks neat) becomes tricky to read onscreen, because there aren’t enough pixels to create a coherent image. I’ll note restrictions such as this at appropriate times during this section on styling text with CSS, thereby providing advice on striking a balance between the visual appearance and
practicality of web-based text.

Related posts:

1. CSS introduction CSS is the W3C standard for defining the visual presentation...

Related posts brought to you by Yet Another Related Posts Plugin.