CSS: overriding presentational tags

Presentational tags are still a living relic of a past age when CSS didn't exist and all the presentational information were bound to the markup. In this post I'll show you some techniques to override such tags using CSS. This turns out to be very useful when defining user style sheets.

font

The most used presentational tag is surely the font tag. Fortunately, this is also simple to override:

font {
  font: normal 1em Arial, sans-serif !important;
  color: #000 !important;
}

We use the !important statement to make sure that our styles will override the default settings of this tags. These settings come in the form of three attributes:

1. face
2. color
3. size

You can also use attribute selectors to be more specific:

font[face],
font[face][color],
font[face][color][size] {

  font: normal 1em Arial, sans-serif !important;
  color: #000 !important;


}

marquee

marquee is mainly used to create the effect of scrolling and animated text. Some browsers allow CSS to reset its behavior, others don't. Here's a way:

marquee {
  -moz-binding: none !important;
  display: inline !important;
  overflow: hidden !important;
}

However, this doesn't work correctly on every browser. Perhaps the best thing you can do is to use the declaration display: none and remove it entirely from the layout.

blink

This tag makes the text blink. It can be easily overridden by a single declaration:

blink {
 text-decoration: none !important;
}

center

The behavior of this element is double: it can either center text or some elements. You can reset its behavior with a double declaration:

center {
  text-align: left !important;
}

center * {
 margin-left: 0 !important;
 margin-right: 0 !important;
}