CSS: resetting presentational and non-standard tag styles

  • CSS
  • Gabriele Romanato

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 presentation tags styles using CSS. This turns out to be very useful when defining user style sheets.

font

The most used (and overused) 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 styles of this tag. These styles 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 this behavior, others don't. Here's the code:


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

However, the above code doesn't work reliably across browsers. Perhaps the best thing you can do is to use the declaration display: none and remove this tag 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 can either center text or some elements. You can reset its behavior with a couple of declarations:


center {
  text-align: left !important;
}

center * {
 margin-left: 0 !important;
 margin-right: 0 !important;
}
[view-example url="http://codepen.io/gabrieleromanato/pen/JHyEn"]
Back to top