Using CSS with an existing site for the first time.

First time CSS - period. Now, how do I strip some code.

[HeyJim]

I have pages written with DW 4.0. and did some VERY simple css stuff to them today experimenting with css, such as:
BODY{background-color:#597795; color:#FFFFFF; font-family:sans-serif; font-size:medium; font-weight:normal; }

A{color:#FFFF99; font-family:sans-serif; font-size:small; }

A:Visited{color:#FFFF99; font-family:sans-serif; font-size:small; }

A:Hover{color:#FFFF99; font-family:sans-serif; font-size:small; }

Since one of the advantages of css is reducing code bloat, what changes do I want to make to reduce my font tags, for instance. Can I do a find and replace and wack everything at once? Find and replace what with what?
Thanks.

[createErrorMsg]

Hey, Jim. You're not new to WebmasterWorld, but since you've said it's your first css venture, Welcome to CSS!

Axing all the <font> tags that DW puts into your code is a great place to start with CSS. How to go about doing that depends upon what, where and how many <font> tags there are. Let's run through an example to give you an idea of where to start...

Say you have a document structured with a title heading (<h1>) that is sized at 6 in DW, is blue, and uses Times New Roman, has subheadings (<h2>), also in blue, sized at 4 in DW and uses the Tahoma font, and has paragraphs(<p>) with size 3 in DW, in a regular black Arial font. In DW's tag soup, you'd get something like this...

<h1><font face="Times New Roman, Times, serif" size="6" color="#0000FF">Title</font></h1>
<h2><font face="Verdana, Arial, Helvetica, sans-serif" size="4" color="#0000FF">Subheading</font></h2>
<p><font face="Arial, Helvetica, sans-serif" size="3" color="#000000">Paragraph
of scintillating text.</font></p>
<p><font face="Arial, Helvetica, sans-serif" color="#000000" size="3">Paragraph
of scintillating text.</font></p>

...Yuck. This is cut'n'paste straight from DW3, so it can't be that much different from DW4s output.

To convert this document to css, we will remove all the <font> tags, and put the information they contain into the stylesheet instead. It's a good idea to leave the <font> tags in until you've finished transferring their contents to the stylesheet, lest you forget the details during the shift. <font> tags use old, deprecated properties so we'll need to translate them. For instance, size="6" is meaningless in CSS. The rough equivalent is 16px. Also the 'face' value becomes 'font-family' in CSS. Let's start with the <h1>...

DW:
<font face="Times New Roman, Times, serif" size="6" color="#0000FF"> becomes
CSS:
h1 {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
color: #0000FF;
}

...What this does is sets the styling (read, appearance) of all <h1> tags in the document to match your specifications. You can now take all the <font> tags controlling the appearance of <h1> content out of the html. "Times New Roman" is in quotes because it is a font name with spaces. Non-spaced font names do not require quotation marks.

To continue with the rest of this document, here's the <h2> tag styles...

DW:
<font face="Verdana, Arial, Helvetica, sans-serif" size="4" color="#0000FF"> becomes
CSS:
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #0000FF;
}

...and the <p> styles...

DW:
<font face="Arial, Helvetica, sans-serif" size="3" color="#000000"> becomes
CSS:
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}

...You're final stylesheet for this stuff will look like this...

h1 {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
color: #0000FF;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #0000FF;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}

...You can now delete all those <font> tags, leaving your html source code looking like this...

<h1>Title</h1>
<h2>Subheading</h2>
<p>Paragraph of scintillating text.</p>
<p>Paragraph of scintillating text.</p>

...clean, uncluttered, beautiful. God I love CSS.

[Bonusbana]

h1 {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
color: #0000FF;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #0000FF;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}

Even slimmer coding would be to put all values in one font attribute and use three letter color definitions.

h1 {
font: 16px/16px "Times New Roman", Times, serif;
color: #00f;
}
h2 {
font: 14px/14px "Times New Roman", Times, serif;
color: #00f;
}

etc...

You can also style all fonts and sizes in the document in the body attributes:

body {
font: small/1.8em "Times New Roman", Times, serif;
color: #00f;
}

[drbrain]

With what you've given, you can cut a lot out by:

* Using shorthand properties
* Using the cascade
* Using shorthand colors
* Grouping selectors
* Eliminating defaults

This brings the rules listed above down to:

body { background: #597795; color: #fff; font: medium sans-serif; }

:link, :visited { color: #ff9; font:small; }

(There's no reason to select the anchor ('a') with link styles. Instead, use the :link and :visited pseudo-classes)

[createErrorMsg]

Even slimmer coding would be to put all values in one font attribute and use three letter color definitions

I was aiming to avoid overloading the one post with too much info, but this is very true.

[Hester]

h1 {
font: 16px/16px "Times New Roman", Times, serif;
color: #00f;
}
h2 {
font: 14px/14px "Times New Roman", Times, serif;
color: #00f;
}

If elements share the same styles, you can apply the common styles in one go, then just style the differences:

h1, h2 {font-family:"Times New Roman", Times, serif; 
color: #00f;}

h1 {font-size:16px;}

h2 {font-size:14px;}

Huge savings in bytes can be had this way.

[HeyJim]

Thanks everyone.

Now it's time for me to get rid of the font tags on my site and then print out this thread, study it a bit and implement the shortcuts.