CSS-Redefining HTML Tags & CSS Selector Style

What are Tags?

The components that control HTML files are called tags or markups.

They consist of characters that show up within HTML bracket markers. Some have closing markups and others do not.

<BR>is a line break

<P> </P>is a paragraph

<H1> </H1> is a size 1 heading

<TR> </TR> is a table row

A redefined HTML tag

This is one of the 3 style types available in CSS. They do not appear in the CSS Styles Panel, but any redefined tag appears in its new form if you select it in the Property Inspector once you have saved it.

How to redfine a tag

Redfining the H1 tag is done this way

  1. Select New Style from the button or drop down menu in the CSS Panel
  2. Select Redefine HTML Tag from the selector box and the tag you want to redfine from the tag box above.
  3. Redefine all the parameters and click OK
  4. Have a look in the code at HEAD of the document. Here is the new H1 style just redefined.

<style type="text/css">
<!--
h1 { font-family: Arial, Helvetica, sans-serif; font-size: large; font-style: italic; font-weight: bold; font-variant: normal; text-transform: none; text-align: center; color: #6600FF}
-->

Here is a redefined H1

CSS Selector Tag

This third style redefines a group of HTML tags instead of just one. For instance you can redefine H1 only within a table row.

You do this as follows

Select New Style from the button or drop down menu in the CSS Panel
Pick Use CSS Selector, This Document Only and then type in the tags in the Selector box

Redefine all the parameters and click OK.

Have a look in the code at HEAD of the document. Here is the new H3 style just redefined for this table row only.

td h3 { font-family: "Kristen ITC"; font-size: 36px; font-style: normal; font-weight: bold; text-transform: capitalize; color: #009900}

This is the result

New Cell Heading


Using CSS Selector for Hyperlink Rollovers

These CSS Selector styles redefine the anchor tag<a> used in hyperlinks.It makes the link change colour when user has cursor positioned over it

In CSS Panel select New Style and CSS Selector.

There are 4 link styles. Select a:hover to add rollover to hyperlinks. Click Ok.

In Style Definition dialogue box pick a colour and press Ok

The CSS selector style is now defined for the document whenever you create hyperlinks.

Make a hyperlink and then test in out in the browser.


Try out these rollover hyperlinks that will navigate you away from this page.

Back to CSS1          To Dreamweaver Index               To Site Index