On 31 Aug 2004 06:36:36 -0700, Piedro <pp*****@hotmail.com> wrote:
Hi group,
as I was browsing the web and checking out w3schools.com I read that
the font tag was deprecated and that I should use css styles for
formatting like
for example
<p class="p1">
Text goes here
</p>
Yes, color should be put in the stylesheet.
But I started thinking how would I get for example the next text with
the specified format (between brackets) on my webpage, without having
defining a new <p class="xxx"></p> for every line
<p>
First line (green and bold)
Second line (blue and underline)
Third line (red)
</p>
Well, first, I'm not sure you know, but the above would be rendered like
this.
First line (green and bold)Second line (blue and underline)Third line (red)
If these are separate paragraphs (they're way too short to be paragraphs,
aren't they? Oh well) then use separate p elelemts.
<p>First line (green and bold)</p>
<p>Second line (blue and underline)</p>
<p>Third line (red)</p>
If they are one paragraph with new lines every so often - like a stanza of
a poem, for example - use the br element.
<p>First line (green and bold)<br>
Second line (blue and underline)<br>
Third line (red)</p>
If you want different styles attached to different text, you need to have
different selectors in the stylesheet, and often this means new classes.
Now, here's where a lot of new CSS users get tripped up - use class and id
names which describe the CONTENT, not the EFFECT.
In this case, I'd first decide what is the "usual" rendering of a
paragraph. Let's assume it's plain red text.
p {color: red;}
Now, I can create a class for green and bold. Let's say this is purely
decorateve, I'll call it "deco1" (short for decorative style 1).
..deco1 {color: green; font-weight: bold;}
..deco2 {color: blue; text-decration: underline;}
(BTW I do not recommend underlining and coloring text, unless you really
want people to get mad at you when they click it over and over.)
Now our first example would be:
<p class="deco1">First line (green and bold)</p>
<p class="deco2">Second line (blue and underline)</p>
<p>Third line (red)</p>
The second:
<p><span class="deco1">First line (green and bold)</span><br>
<span class="deco2">Second line (blue and underline)</span><br>
Third line (red)</p>
Hope this clears things up.