web page keeps using default CSS style sheet setting

[karen987]

I have an ASP web page which has a style sheet attached. It is a news page which is added from a separate admin section. The news adding section does have a rich text editor to change text or format it.. My problem is this.

The CSS stylesheet is set up to show the body text as below.

      body,p,td{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:10px;color: Black}

this is fine on most pages, however in the page which has the body of the article i want it to show a font size 12, with wider line spacing. If i alter the CSS code above, it alters the body on other pages which i don't want changed. In short i'm happy with a size 10 font i only want one section of the web changed, but i'm finding it very hard to do that. I use dreamweaver, but don't know how to use it properly.

I tried altering the code of section i want changed but it still keeps showing the one on the stylesheet. It does however show the line spacing. How do i get it to alter the size to size 12? It completely ignores the below, except the line- height.

 <span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px;"><%= CONTENT %></span>  

Is there a hierarchy that stylesheets follow?
What i want is for this particular section (lets call it style 3) to have a size 12 font, with wider line spacing than the default for this section. One and a half size line spacing would be OK.
I'm totally html illiterate, so any help appreciated. Thanks in advance.

[drhowarddrfine]

Yes, CSS follows a cascade (Cascading Style Sheet) and a hierarchy.

What you can do is this. Say the text is inside a <p>. You can give that tag a unique name called an 'id'. Let's call it "style3". So:
<p id="style3">

Now, in your css, you can say:

#style3{
font-size:12px;
line-height:15px;
}
 

And that will be applied only to that tag.

Keep in mind that an id can be used just once per page. If you need to reuse that style on other elements, call it a 'class' instead.

<p class="style3">
 
.style3{
font-size:12px;
line-height:15px;
}
 

Notice the 'dot' in front of the "style3" above.

[karen987]

Yes, CSS follows a cascade (Cascading Style Sheet) and a hierarchy.

What you can do is this. Say the text is inside a <p>. You can give that tag a unique name called an 'id'. Let's call it "style3". So:
<p id="style3">

Now, in your css, you can say:

#style3{
font-size:12px;
line-height:15px;
}
 

And that will be applied only to that tag.

Keep in mind that an id can be used just once per page. If you need to reuse that style on other elements, call it a 'class' instead.

<p class="style3">
 
.style3{
font-size:12px;
line-height:15px;
}
 

Notice the 'dot' in front of the "style3" above.

Thank you for your help drhowarddrfine,

Actually i only want to apply it to
<%= CONTENT %>

so does that mean i should change the code in my webpage to to

<p id="style3"><%= CONTENT %>

Sorry for my ignorance, but i only know the very basics of dreamweaver and html, and don't know about coding. Thanks for your help.

[karen987]

I tried this, and it didn't work,

<p class="style3"><%= CONTENT %></p>  

and in the CSS external style sheet i added

.style3{
font-size:12px;
line-height:15px;
}

[drhowarddrfine]

You are losing me there since I know little about asp. You might ask over on the asp board. I'm guessing that the <% part inserts the content plus any other html associated with that. If so, the CSS and the html I gave may not function correctly; it depends on what gets inserted by that <% stuff.

[karen987]

You are losing me there since I know little about asp. You might ask over on the asp board. I'm guessing that the <% part inserts the content plus any other html associated with that. If so, the CSS and the html I gave may not function correctly; it depends on what gets inserted by that <% stuff.

Hi Dr Howard,

If i change the first function i mentioned above, then it does work. How can i insert what the others advised me above in an INLINE style?

thanks

[drhowarddrfine]

I'm shooting in the dark without seeing code. The typical way in CSS is:
display:inline;

[yinxing]

<head>
......
<style type="text/css">
... ...
.stylename{
font-size:12px;
line-height:18px;
}
... ...
</style>
... ...
</head>
<body>
... ...
<p class="stylename"><% =your word %></p>
... ...
</body>

[karen987]

<head>
......
<style type="text/css">
... ...
.stylename{
font-size:12px;
line-height:18px;
}
... ...
</style>
... ...
</head>
<body>
... ...
<p class="stylename"><% =your word %></p>
... ...
</body>

someone told me that the P class wont work in a table?

[karen987]

OK for the one who said he's shooting in the dark, here is some code from the page, it's the "content" at the end i want styling. It is in a table, so maybe that's why the P class doesn't work?

<td width="570" valign="top">
                    <!-- Main Article -->
                        <img src="pixel.gif" width="400" height="1" alt="" border="0" />
                        <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr>
                            <td class="ArticleTitle"><%= TITLE %></td>
                            <td>
                                <table cellpadding="2" cellspacing="5" border="0" align="right"><tr>
                                    <td align="center"><a href="email_article.asp?ID=<%=NID%>" class="HelpLink" onClick="NewWindow(this.href,'name','575','220','Yes');return false;"><img src="images1/img_sendto.gif" width="14" height="9" alt="Email This Article ..." border="0"></a></td>
                                    <td align="center"><a href="view_printer.asp?ID=<%=NID%>"><img src="images1/img_print.gif" width="14" height="14" alt="Printer Friendly ..." border="0"></a></td>                              
                                    <td><a href="export.asp?m=doc&amp;id=<%=NID%>"><img src="word_document.gif" width="16" height="16" alt="Export to MS Word Document ..." border="0" /></a></td>
                                    <td><a href="export.asp?m=txt&amp;id=<%=NID%>"><img src="images1/txt_doc.gif" width="15" height="16" alt="Export to plain text document ..." border="0"></a></td>
                                </tr></table>                            </td>
                        </tr></table>
                        Filed under  <em><%=CATEGORIES%></em> on <%= FormatDateTime(POSTED,DATE_F) %><%IF SHOW_AUTHOR = True THEN%> By: <%=AUTHOR%><%END IF%>.
                        <hr size="1" style="color: WhiteSmoke;height: 1px;width: 100%;" />
         <%= CONTENT %>
                        </span>                                               <br />    

and this is the CSS default body code. I want it to remain the same, except for the font size which should be 12 . Is it possible to have 2 body styles?

     body,p,td{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    color: Black;
    line-height: 120%;
}

[iam_clint]

ASP looks fine can you response.write content and paste the actual value of that variable so the guys in the HTML/CSS department will know more of why the styles aren't being applied.. Currently this question still belongs in html/CSS. But without seeing the true value of content you won't get anywhere so please reply with its value and what its wrapped in


example <p style="style3"><font style="style2">This is the content that is being places between these tags</font></p>

see this could cause your problem so we really need to see an example of what content is.

[karen987]

I_amClint and others who offered advice,

i've solved it now, and this was the solution

In the CSS sheet i put

DIV#contentLText P, DIV#contentLText TD 
{ 
  font-size: 12px; 
} 

and the "content" tag as below

<div id="contentLText"><%=CONTENT%></div> 

Thanks to everyone who offered help.

[drhowarddrfine]

Yes, that is the solution from post #2.