Welcome to WebmasterWorld Guest from 54.80.189.255

Forum Moderators: not2easy

Message Too Old, No Replies

Styling Paragraphs with CSS

Styling all paragraphs on a page with the same class

     
2:31 pm on May 18, 2014 (gmt 0)

Preferred Member

10+ Year Member

joined:Apr 1, 2005
posts: 370
votes: 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!
2:48 pm on May 18, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:3723
votes: 205


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)
}
5:00 pm on May 18, 2014 (gmt 0)

Senior Member from GB 

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

joined:Feb 10, 2002
posts:936
votes: 4


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.
8:06 pm on May 18, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:14715
votes: 614


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.
12:51 am on May 19, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5019
votes: 24


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.
8:11 pm on May 20, 2014 (gmt 0)

Preferred Member

10+ Year Member

joined:Apr 1, 2005
posts: 370
votes: 0


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).
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members