different css formatting on different <p> tags

Question

i am creating a website where i read in html data from other websites.

The problem is that the source that i am reading all has <p> tags in it, but i actually want to format them differently

is there a way to have some <p> tags using one formatting and some <p> tags do other formatting in the same web page?

Answer 1

Wrap the imported content with something like this:

<div class='imported'>
<p>Imported content here...</p>
<p>These paragraph tags were imported...</p>
</div>

and style it like this:

div.imported p {
    /* My style for imported <p>s */
}

Edit In answer to the comment about styling your own <p>s, you can style all the <p>s on the page with a standard rule like this:

p {
    /* Style for all <p>s */
}

and then the more specific rule for imported <p>s will override that one.

Edit: In answer to the comment about inline styles, you could override them with !important but that will have a knock-on effect on people with user style sheets. I don't believe there's a clean CSS-only solution to that - you might end up having to parse the imported HTML after all.

Answer 2

Yes, if the tags have different CSS classes, e.g.

HTML

<p class="foo-site">This is some content lifted from Foo Site.</p>
<p class="bar-site">This is some content lifted from Bar Site.</p>

CSS

p.foo {
    /* Style for Foo Site text */
}

p.bar {
    /* Style for Bar Site text */
}

Answer 3

Yes, you can probably give them specificity like so

p:first-child { /* note this won't work in ie6 */
    border: 1px solid red;
}

p.main {
    background: pink;
}

If you don't have access to change the HTML, and REALLY needed to add classes (to get it to work in IE6), you could use jQuery (keep in mind users without JS won't see any of your classes added this way)

$('#content p:last').addClass('last');

Answer 4

<div class="includedContent">
<p>a paragraph</p>
</div>
<p>Another paragraph</p>

with

p { font-size: 8pt; }
div.includedContent p { font-size: 10pt; }

Answer 5

There has to be something in the markup to differentiate the paragraphs from each other.

One group might all be a member of a given class, or might all be descendants of an element with a particular id, or some other condition.

You have to look at your markup, see if there are any rules that can describe the group of paragraphs that is different, and change the markup so such a rule can be written if there aren't.

Selectutorial will help you learn about the types of rules you can use.

Since you say you are importing HTML from other websites (I hope you are being careful, it sounds like you risk letting them insert harmful code into your pages), you should be able to wrap the imported code in an element (a div would probably be best) that you can give a class or an id and use a descendent selector with.

Answer 6

You could use jQuery to add css to all even and odd <p>s like this:

$("p:even").css("background-color", "#bbbbff");

$("p:odd").css("background-color", "#aaaaff");