DIV style font color

[mikemoran+++]

Hello everyone,
First time here and six months into working with Flare. We have a p.example style that adds a light blue background to blue-italic font for "examples". It only works with single-paragraph content. I created DIV.example to group paragraphs together with the background and font styles. The only problem is that the front remains black. The Preview window in the stylesheet editor shows blue font. What am I missing? Thanks for the help.

[NorthEast]

I would guess that your regular paragraph p style is setting the font to black, so because your paragraph is inside the div.example, the paragraph colour will take precedence over the div colour.

If so, you could handle this in a few different ways:

1) Don't set a colour on the regular paragraph tag, and instead set body tag to have the black colour - body { color: black; }. Then your paragraphs will just inherit the colour from their parent, like your div.example.

or

2) If you must set a colour on the paragraph tag, then you need to override it for the div. For example div.example p { color: blue; }

[mikemoran+++]

I understand this, but why would the P color take precedence over the div color, but I am able to change the font-style to italics?

[robdocsmith]

Without seeing what's in your code and css it can be hard to diagnose.

As an alternative (and CSS/Flare is usually full of alternatives), could you change your "example" class to be generic and then be able to apply it either to a paragraph singly or the div as a group? So:

Code: Select all

.example {
   font colour change
   background change
}

Then you can use either

Code: Select all

<div class="example">
<p>Exmaple paragraphs in here</p>
<p>And another</p>
</div>

or

Code: Select all

<p class="example">This is a single example paragrah</p>

[Psider]

You can set the font-style on the div because you haven't specifically set the font-style on the p tag. If you changed the p to include font-style: normal you'd find the italic from the div wouldn't be applied.

[NorthEast]

I understand this, but why would the P color take precedence over the div color, but I am able to change the font-style to italics?

Because that's how CSS works - the 'closest' style will take precedence, so any styles set on a tag will be used instead of any styles set on its parent tags.

And like Psider said, you presumably haven't set a font-style (or a background) on the paragraph tag, so it's able to inherit those styles and not override them.

It's worth spending some time to learn the basics of CSS and HTML, as it'll help a lot when using Flare.