Forum Moderators: open

Message Too Old, No Replies

HTML in Blog Posts - Override CSS Rules

         

renet

5:32 am on Aug 29, 2008 (gmt 0)

10+ Year Member



I would like to override the css for blog posts.

i.e.:

Sometimes I want to write 1 or more words or sentences but use a super large or large size font and have it also in italics. But the CSS sets the fonts as a set size.

In the particular case of the blog I am referring to the background is Black.. Text is White.

When I increase the font size and do italics in a block of text the text becomes black and a large area behind, above, on the sides and below the text turns white.. very annoying indeed.

I would simply like to see the text enlarged and the italics and the the text remains white with a black background.

Here is html:

<div class="entry">
<p><img class="size-full wp-image-48" title="TEXT" src="http://example.net/wp-content/uploads/2008/08/ld.jpg" alt="alt text" width="390" height="293" align="right" hspace="10" vspace="5" /></p>

<p>TEXT TEXT TEXT</p>
<p>TEXT TEXT TEXT</p>
<p>TEXT TEXT TEXT</p>

<h2><strong><em>&#8220;Headline Headline Headline<br />
Headline Headline Headline<br />
Headline Headline Headline<br />
Headline Headline Headline"</em></strong></h2>

</div>

tangor

9:24 am on Aug 29, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Usually a <span> inline with the text will over ride any css file.

ergophobe

4:16 pm on Aug 29, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



If it's something you encounter often, you need to add rules to your CSS file to handle the situation.

If it's a one-off, you can use inline CSS or add a <span> with either inline CSS or an appropriate class.

renet

5:36 pm on Aug 29, 2008 (gmt 0)

10+ Year Member



Thanks. I have been able to obtain most of the effect I am after as shown below. What would make this more complete for me is adding a larger space between <p>TEXT TEXT TEXT</p> and the para below. Do you have any idea which code to use to increase space between 2 para's

perhaps as you say using inline css?

<p>TEXT TEXT TEXT</p>
<p><center><em><font size="h5">&#8220;TEXT TEXT TEXT<br />
TEXT TEXT TEXT<br />
TEXT TEXT TEXT<br />
TEXT TEXT TEXT</font><em></center></p>

ergophobe

7:36 pm on Aug 29, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Ideally, you would declare a class and put the rule in your CSS file, unless you want all paragraphs to have that space

in your CSS file

#1

p {margin-bottom: 2em;} /*applies to all paragraphs, nothing else to do*/

#2
In CSS file:
p.spaced {margin-bottom: 2em;} /*applies to all paragraphs of class space; must give class name to the paragraph*/

in HTML you enter:
<p class="spaced">TEXT TEXT </p>

#3
One-off version, in the HTML with inlin CSS

<p style="margin-bottom:2em;">TEXT TEXT </p>

One of those shoudl work, but so would a dozen other methods.

renet

8:45 am on Sep 4, 2008 (gmt 0)

10+ Year Member



Thanks so much. I will try these and am sure they will work.