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 */
}