Styling Paragraphs with CSS

Styling all paragraphs on a page with the same class

[Adam5000]

Hello again everyone.

I'm working on styling paragraphs today, and here's the situation.

I've got a group of 8 pages. Five of them have red text, and three of them have green text.

And at this point, I have them styled with an external sheet like this.

p
{
color: red;
}
p.grn
{
color: green;
}

Pages one thru five
<p>
Red text here
</p>

Pages six thru eight
<p class="grn">
Green text here
</p>

And this works. The trouble is, all the pages have a significant number of paragraphs on them, and right now I'm inserting class="grn" into at least a hundred paragraph tags.

Is there a way to make all the paragraphs on a page class=grn without inserting class="grn" into each into each <p> tag.

Help!

[not2easy]

What do you use to edit your pages? Without an idea of what you are using my first thought is find and replace in a text editor, but that assumes you are manually editing individual html pages.

You could also assign an ID to a container element and use the # to give all <p tags in that element the green color.

Example would be <div id="grn"> before the first and </div> after the last. Add #grn to your css:

#grn p {
color:#0F0; (or your favorite format)
}

[tbear]

If you are changing all of the paragraphs on the page, maybe you could add on-page css, making all paragraphs green. That would over-ride the linked css for the <p> tags.

[lucy24]

Learn this formulation:

div.classname p {blahblah}

or even

body.classname p {blahblah}

This means: any paragraph inside a div with the given name has the named set of attributes. You probably want to go with div rather than body, unless you can be certain you'll never have paragraphs for things like shared navigation that presumably won't be red and green.

:: insert boilerplate about how you should call the div something other than "green" because what if next year you decide to change the color scheme* ::

You can then override it with

div.classname p.newclass {blahblah}

where you only need to specify the "div" part if the css for p.newclass includes elements that are different from the generic p-within-the-div, like

div.classname p.black {color: black;}

You can also do things like

div.classname > p

meaning "this rule only applies if the p is directly inside div.classname, not if it's inside some intermediate element":

div.green > p {color: green;}
div.black > {color: black;}

You can now nest div.black and div.green inside each other.


* Sure, there are exceptions. I've got one directory that's made up entirely of "body class = 'pink'" "body class = 'blue'" "body class = 'tundra'" and so on, because each page's color scheme is determined by its preset content.

[Fotiman]

I would avoid the unnecessary "div" or "body" in the selector, though. For example, instead of:
div.classname p

I'd just use:
.classname p

Then it doesn't matter if you put "classname" on the body element, or on some div element.

As was pointed out above, though, avoid classnames that describe the presentation, like "green" or "red". Instead, use a classname that has some sort of semi-semantic meaning that describes the content.

[Adam5000]

Not2. Thank goodness I've got an editor that does that now. I created at least the first fifty pages using the basic Notepad that's packaged with windows. Looking back, I don't see how I ever did it. With the editor I have now, I can replace all, and even replace all in all open documents. That makes the job a lot easier. Great advice.

Tbear, that works too.

Lu, divs are a good idea as well. There's definitely value in divs.

Fotiman, your idea works also.

Kudos to all, and my css code is working now better than ever. My site has some improvements on the drawing board, but it's open now, and you're all invited. Lu, that means you too (smile).