469,921 Members | 2,108 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,921 developers. It's quick & easy.

web page keeps using default CSS style sheet setting

114 100+
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.

Expand|Select|Wrap|Line Numbers
  1.       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.

Expand|Select|Wrap|Line Numbers
  1.  <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.
May 11 '07 #1
12 2318
drhowarddrfine
7,435 Expert 4TB
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:
Expand|Select|Wrap|Line Numbers
  1. #style3{
  2. font-size:12px;
  3. line-height:15px;
  4. }
  5.  
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.
Expand|Select|Wrap|Line Numbers
  1. <p class="style3">
  2.  
  3. .style3{
  4. font-size:12px;
  5. line-height:15px;
  6. }
  7.  
Notice the 'dot' in front of the "style3" above.
May 11 '07 #2
karen987
114 100+
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:
Expand|Select|Wrap|Line Numbers
  1. #style3{
  2. font-size:12px;
  3. line-height:15px;
  4. }
  5.  
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.
Expand|Select|Wrap|Line Numbers
  1. <p class="style3">
  2.  
  3. .style3{
  4. font-size:12px;
  5. line-height:15px;
  6. }
  7.  
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.
May 12 '07 #3
karen987
114 100+
I tried this, and it didn't work,
Expand|Select|Wrap|Line Numbers
  1. <p class="style3"><%= CONTENT %></p>  
and in the CSS external style sheet i added

Expand|Select|Wrap|Line Numbers
  1. .style3{
  2. font-size:12px;
  3. line-height:15px;
  4. }
May 12 '07 #4
drhowarddrfine
7,435 Expert 4TB
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.
May 12 '07 #5
karen987
114 100+
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
May 12 '07 #6
drhowarddrfine
7,435 Expert 4TB
I'm shooting in the dark without seeing code. The typical way in CSS is:
display:inline;
May 12 '07 #7
<head>
......
<style type="text/css">
... ...
.stylename{
font-size:12px;
line-height:18px;
}
... ...
</style>
... ...
</head>
<body>
... ...
<p class="stylename"><% =your word %></p>
... ...
</body>
May 12 '07 #8
karen987
114 100+
<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?
May 13 '07 #9
karen987
114 100+
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?

Expand|Select|Wrap|Line Numbers
  1. <td width="570" valign="top">
  2.                     <!-- Main Article -->
  3.                         <img src="pixel.gif" width="400" height="1" alt="" border="0" />
  4.                         <table cellpadding="0" cellspacing="0" border="0" width="100%"><tr>
  5.                             <td class="ArticleTitle"><%= TITLE %></td>
  6.                             <td>
  7.                                 <table cellpadding="2" cellspacing="5" border="0" align="right"><tr>
  8.                                     <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>
  9.                                     <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>                              
  10.                                     <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>
  11.                                     <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>
  12.                                 </tr></table>                            </td>
  13.                         </tr></table>
  14.                         Filed under  <em><%=CATEGORIES%></em> on <%= FormatDateTime(POSTED,DATE_F) %><%IF SHOW_AUTHOR = True THEN%> By: <%=AUTHOR%><%END IF%>.
  15.                         <hr size="1" style="color: WhiteSmoke;height: 1px;width: 100%;" />
  16.          <%= CONTENT %>
  17.                         </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?


Expand|Select|Wrap|Line Numbers
  1.      body,p,td{
  2.     font-family:Verdana, Arial, Helvetica, sans-serif;
  3.     font-size:10px;
  4.     color: Black;
  5.     line-height: 120%;
  6. }
May 13 '07 #10
iam_clint
1,208 Expert 1GB
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.
May 14 '07 #11
karen987
114 100+
I_amClint and others who offered advice,

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

In the CSS sheet i put

Expand|Select|Wrap|Line Numbers
  1. DIV#contentLText P, DIV#contentLText TD 
  2.   font-size: 12px; 

and the "content" tag as below
Expand|Select|Wrap|Line Numbers
  1. <div id="contentLText"><%=CONTENT%></div> 
Thanks to everyone who offered help.
May 14 '07 #12
drhowarddrfine
7,435 Expert 4TB
Yes, that is the solution from post #2.
May 14 '07 #13

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

8 posts views Thread by Alan J. Flavell | last post: by
6 posts views Thread by scottyman | last post: by
7 posts views Thread by GaryDean | last post: by
9 posts views Thread by =?Utf-8?B?Sm9obiBCYWlsZXk=?= | last post: by
5 posts views Thread by Andreas Prilop | last post: by
reply views Thread by Waqarahmed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.