homepage Welcome to WebmasterWorld Guest from 54.146.175.204
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Styling Paragraphs with CSS
kaufenpreis



 
Msg#: 4681129 posted 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



 
Msg#: 4681129 posted 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



 
Msg#: 4681129 posted 1:45 pm on Jun 19, 2014 (gmt 0)

Sorry forgot to close my div:

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

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4681129 posted 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. :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved