page keeps using default CSS style, want to change it

[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 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.

[holyhttp]

If you would like to define a style for just the current page using Dreamweaver, go to the CSS panel and click the + sign.
name the class or enter "body,p,td" of your new style then select "This document only".
The new style will be only applied to the above tags in the current document only.
Of course the new style definition has to be inserted after the external css link so that it can override the style for those tags.

[ray326]

Is there a hierarchy that stylesheets follow?

That's the C in CSS. There are three levels of cascade (external, embedded, inline). You can follow your link to your external style sheet with an embedded style sheet that will override any matching selectors in the external sheet. Inline styles entered via the style attribute at the element level override everything else.

[karen987]

Ray326 and holyhttp

Thank you both for replying. i think i follow what you said, but don't understand the terms you use, as i said i'm totally html and even dreamweaver illiterate. I can only just about do the basics.

So basically you're saying, if i apply an inline style it should override everything else? How exactly can i do this?

The only part i want to apply it to is this

<%= CONTENT %>

At the moment the above code insists on using the default, which is in the stylesheet, not what i put in the quotes with it in my first message.

What exactly do i need i need to put and how, if i want to show the below attributes (in bold) and to override any other style applied via the stylesheet etc.


font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 15px;

I am not even sure is the line height will be OK or even the right thing to use, what i want to do is increase the spacing between lines. At the moment it is too cramped for the "content" bit, though ok for the rest of the website. As 15px for the line height, i'm only guessing it will be OK, but if it works i can always change the figure to something approriate i suppose.

Thanks for the tips and sorry for being so ignorant.

[WebJoel]

Some Selectors won'; work on "<span>" (like "margin-top;" and margin-bottom;", etc) as this would 'break' the parent element if it did. "font-size;" would over-ride the parent "<p>" however. I am eyeing the default fomnt-size of "<p>"... 10px?? That is half the height of a scrollbar... I recall somewhere reading about IE having display trouble with font-sizes 'below 10px;'... Try 0.8em for the <p> font-size, and 0.8em for the span's font-size (or whatever).
I had played a bit with this yesterday when I read this post, but wasn't getting the all the expected results. I suspect that at around 10 or 11px font-size, the difference is too imprecise to calculate and IE just throws an approximation. Generally, around 12px is a good 'easy-to-read' font-size and anything below that, requires ...help(?). "em"-size might be a bit more accurate if you're after 'the fine print'.

I'll try to work this later..

[ray326]

As a first shot change the span to a div.