FYI
you can also apply a custom editable css to each page if you add it in an editable region in your DWT as
<!-- #BeginEditable "pagestyles" -->
<style type="text/css"><!--
any embedded editable styles here
// --> </style>
<link rel="stylesheet" type="text/css" href="your.css">
<!-- #EndEditable -->
| Gee I feel stupid! I applied the CSS to the DWT and it worked great. I
| forgot about the link being embedded in the top of the web page and when
| applied the DWT,
| I could not find the link at the top of the page.
|
| | > Well, that's because there is NO CSS in your DWT. You would have to do
| > one of these two things -
| >
| > 1. Make a link to the CSS file in your DWT, or
| > 2. Embed the CSS rules in the head of the DWT file.
| >
| > --
| > Murray
| >
| > | >> Problem is that I can apply the CSS to the website. The fonts and links
| >> will change color. However when I apply the DWT to the website, the CSS
| >> no longer works. When I have page with the DWT applied, and I try to
| >> apply the CSS in with Design, Format, Style Sheet Links, the Style Sheet
| >> Links is grayed out. It is as though you cannot apply CSS and DWT to
| >> page--it is one or the other.
| >>
| >> Susan
| >>
| >> | >>> The order of the pseudo-classes is quite important since there exists
| >>> such a thing as the RULE OF GREATER SPECIFICITES in CSS. This rule says
| >>> generally that the closer a style rule is to the element being styled,
| >>> the higher its priority will be. Since you have defined the link
| >>> pseudo-class AFTER the hover or the active pseudo-class, it will trump
| >>> both, and you will lose the effect of them.
| >>>
| >>> Try changing the order from this -
| >>>
| >>> A:hover {color: silver; background: navy}
| >>> A:active {color: red; background: #cccccc;}
| >>> A:link {color: blue; background: #cccccc;}
| >>>
| >>> to this -
| >>>
| >>> A:link {color: blue; background: #cccccc;}
| >>> A:hover {color: silver; background: navy}
| >>> A:active {color: red; background: #cccccc;}
| >>>
| >>> and see what happens.
| >>>
| >>> In fact, you could change it to this -
| >>>
| >>> a { color:blue; background:#CCC; }
| >>> a:active { color:red; }
| >>> a:hover {color: silver; background: navy}
| >>>
| >>> (this will hit all <a> tags, though, including named anchors and that
| >>> may not be what you want)
| >>>
| >>> --
| >>> Murray
| >>>
| >>> | >>>> ___________________________________________________________________________________________________________________________
| >>>> External CSS
| >>>> BODY {font-family: Verdana, Arial, Helvetica, San Serif;}
| >>>> h2 {font-family: Rockwell, Verdana, Arial, Helvetica, San Serif; color:
| >>>> navy;}
| >>>> h3 {font-family: Pepita MT, Verdana, Arial, Helvetica, San Serif;}
| >>>> A:hover {color: silver; background: navy}
| >>>> A:active {color: red; background: #cccccc;}
| >>>> A:link {color: blue; background: #cccccc;}
| >>>>
_______________________________________________________________________________________________________________________________
| >>>> DWT
| >>>> <html>
| >>>>
| >>>> <head>
| >>>> <meta http-equiv="Content-Type" content="text/html;
| >>>> charset=windows-1252">
| >>>> <!-- #BeginEditable "doctitle" -->
| >>>> <title>New Page 2</title>
| >>>> <!-- #EndEditable -->
| >>>> <meta name="Microsoft Border" content="none">
| >>>> </head>
| >>>>
| >>>> <body>
| >>>>
| >>>>
| >>>> <div align="center">
| >>>>
| >>>>
| >>>> <table border="0" cellpadding="0" cellspacing="0"
| >>>> style="border-collapse: collapse" width="96%" id="table1">
| >>>> <tr>
| >>>> <td width="3%" rowspan="4"> </td>
| >>>> <td width="90%" colspan="3" height="23">
| >>>> <img border="0" src="ESILL.gif" width="504" height="144"></td>
| >>>> <td width="3%" rowspan="4"> </td>
| >>>> </tr>
| >>>> <tr>
| >>>> <td width="10%" valign="top">
| >>>> <!--webbot bot="Navigation" S-Orientation="vertical"
| >>>> S-Rendering="graphics" S-Theme="aftrnoon" S-Type="children"
| >>>> B-Include-Home="TRUE" B-Include-Up="FALSE" --></td>
| >>>> <td width="50%"><!-- #BeginEditable "MainContent" --> <!--
| >>>> #EndEditable --></td>
| >>>> <td width="10%"> </td>
| >>>> </tr>
| >>>> <tr>
| >>>> <td width="90%" valign="top" colspan="3">
| >>>> <!--webbot bot="Navigation" S-Orientation="horizontal"
| >>>> S-Rendering="graphics" S-Theme="aftrnoon" S-Type="children"
| >>>> B-Include-Home="TRUE" B-Include-Up="FALSE" --></td>
| >>>> </tr>
| >>>> <tr>
| >>>> <td width="90%" colspan="3">
| >>>> <p align="center"><font size="4">This site is best viewed with
| >>>> Navigator 4.7
| >>>> and up and<br>
| >>>> Internet Explorer 5.5 and up</font><br>
| >>>> <b><font color="#000099">©2004 Eastern Shore Institute for Lifelong
| >>>> Learning
| >>>> (ESILL)</font></b><br>
| >>>> All rights reserved<br>
| >>>> Site maintained by <a
| >>>> href="mailto:
[email protected]?subject=ESILL">Susan
| >>>> Acree</a></td>
| >>>> </tr>
| >>>> </table>
| >>>>
| >>>>
| >>>> </div>
| >>>>
| >>>>
| >>>> </body>
| >>>>
| >>>> </html>
| >>>> | >>>>> Show me your DWT page code, please.
| >>>>>
| >>>>> --
| >>>>> Murray
| >>>>>
| >>>>> | >>>>>> When I applied a DWT to web pages, my external CSS style sheet did
| >>>>>> not work anymore for those pages-the background color for links and
| >>>>>> type font. How do you use both CSS and DWT with pages?
| >>>>>>
| >>>>>> Susan
| >>>>>>
| >>>>>
| >>>>>
| >>>>
| >>>>
| >>>
| >>>
| >>
| >>
| >
| >
|
|
