How to Make Cascading Style Sheet (CSS) Tags Redefine Styles - dummies

How to Make Cascading Style Sheet (CSS) Tags Redefine Styles

By Sue Jenkins

By default, all HTML tags in Cascading Style Sheets (CSS), are structurally preformatted to look a particular way and perform specific functions. Take the <h1> tag, for example. This tag is preformatted to be big, black, and bold, and it is intended to identify the main heading within the text, as opposed to the regular text, which is marked up with <p> tags in the content.

When you create a tag redefine style, you use the tag name as the selector name to overwrite the preformatted look of any existing HTML tag, such as <p> and <h1>.

The tag redefine style can be changed to anything you like, such as tailoring the default look of all content between <h1> tags to match the design and color scheme of your site, whether that be Impact, 28 pixels, bold, italic, and #000000 or Palatino Linotype, 32 pixels, bold, and #FF99FF:

h1 {
 font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
 font-size: 32px;
 font-weight: bold;
 color: #FF99FF;

Redefining existing tags is one of the best ways to globally style content on a site without having to selectively apply the styles here and there, as you must with custom class styles. In fact, to streamline the CSS process, most designers at a minimum begin each CSS file by creating tag redefine styles for the <body>, <p>, <h1>, <h2>, <ul>, <ol>, <li>, and <td> tags.

A tag redefine style for the <body> tag, for instance, can take on many of the attributes that were formerly applied to the opening <body> tag in HTML code, such as the default page margin spacing and page background color.

In addition to modifying a tag’s preformatted styles, tag redefine styles can also be used to add new styles to a particular tag. For example, all web pages, unless otherwise specified, have a default 9-pixel margin of space between the edge of the browser window and its contents.


To remove or change this setting, the margin attribute may be redefined in the body tag. The illustration shows an example of how a style for the <body> tag might be redefined in the CSS, where the margin spacing is set to 0 on all four sides of the browser window, the background color of the page is set to black, and the font color for text within the body is set to white, as in the following style code:

body {
 margin: 0px;
 background-color: #000000;
 color: #ffffff;