Styling Paragraphs with CSS

Forum Moderators: not2easy

Message Too Old, No Replies

Styling Paragraphs with CSS

kaufenpreis

1:27 pm on Jun 19, 2014 (gmt 0)

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!

brandozz

1:44 pm on Jun 19, 2014 (gmt 0)

You could put a div around all of your paragraph tags:

<div class="green">
<p>
Hello world
</p>

and change your css to:

p {
color: red;
}

.green p {
color: green;
}

brandozz

1:45 pm on Jun 19, 2014 (gmt 0)

Sorry forgot to close my div:

<div class="green">
<p>
Hello world
</p>
</div>

Fotiman

8:28 pm on Jun 19, 2014 (gmt 0)

Note, it doesn't have to be a div. If you want the style applied to all <p> on a page, then you could add the class to your <body>. Note, though, that class names that describe the presentation (like "green", "grn", etc.) are bad choices for class names. If you later decide that you want those to be blue, then you have to edit your HTML to use a different classname. Instead, if there is some semantic meaning as to why they are a certain color on certain pages, then using class names that describe the content makes it more portable.

For example, what makes the 5 pages with red text similar? What makes the 3 pages with green text similar? Maybe they are located in different "sections" of the site that can be grouped together. So you could do something like this:


.section-1 p {
  color: red;
}

.section-2 p {
  color: green;
}

Note, section-1 and section-2 are overly abstract (you'd want to use names that mean something to you). But this is better than specifying classes like "green".
Then you would simply apply class "section-1" to the body of your first 5 pages, and "section-2" to the body of last 3 pages. Another alternative is to remove section-1 and let the default be red (as you have it now), and then you only override that in the specific sections that you want it to be green. Saves a few bytes. :)