CSS formatting questions...

[Noozer]

Viewing the code below...

<div class="menu">
<p>Please Choose...</p>
<ul>
<li><a href="link" class="menuitem">Item 1</a></li>
<li><a href="link" class="menuitem">Item 2</a></li>
</ul>
</div>

What CSS would I use to declare that a <p> tag should not add a linefeed
after the </p> tag?

I could just not use the <p> tags at all, but I've been told that it's bad
HTML coding. Is <span> called for here, or possibly an <h1> tag?

Also, I've seen pages that have their own custom tags...

<p>This sentence has a <red>RED</red> word in it.</p>

....is this bad practice? If not, how is it done?


Any comments welcome!

 

[Neal]

Viewing the code below...

<div class="menu">
<p>Please Choose...</p>
<ul>
<li><a href="link" class="menuitem">Item 1</a></li>
<li><a href="link" class="menuitem">Item 2</a></li>
</ul>
</div>

What CSS would I use to declare that a <p> tag should not add a linefeed
after the </p> tag?

What hapens is the p element has a bottom margin. You need to set it to 0.

p {margin-bottom: 0;}

You should class the p, so you can set no bottom margin just on the ones
you want.

I could just not use the <p> tags at all, but I've been told that it's
bad
HTML coding.

Actually, this isn't much of a paragraph, but it's the best choice I think.

Is <span> called for here,

or possibly an <h1> tag?

Not a h1, but a lower level heading possibly. Is it a heading? Consider
the whole page gets a h1, each section gets a h2, and this might then be a
h3 maybe.

Also, I've seen pages that have their own custom tags...

<p>This sentence has a <red>RED</red> word in it.</p>

...is this bad practice? If not, how is it done?

I think it is, unless you author your own DTD which I don't think is a
good choice for you. But you can do this:

CSS:
..red {color: red;}

HTML

<p>This word is <span class="red">red</span>.</p>

But class names should refer to the type of content, not to the style
applied. If you needed to use a different background color for the page,
and as a result the red didn't offer sufficient contrast, you'd have to
change to, maybe:

..red {color: green;}

which is plain silly. Always better to name classes (and IDs) after the
content being styled, not after the style you're applying.

 

[Noozer]

What hapens is the p element has a bottom margin. You need to set it to 0.

p {margin-bottom: 0;}

Doh! Makes sense.

You should class the p, so you can set no bottom margin just on the ones
you want.


Actually, this isn't much of a paragraph, but it's the best choice I

think.

That's what I thought.

I think it is, unless you author your own DTD which I don't think is a
good choice for you. But you can do this:

CSS:
.red {color: red;}

Just wondering about creating "custom tags" instead of classing a span.
Saves a bit of typing.

Thanks!

 

[Neal]

I want this to affect any <p> tag used in any 'menu' class container. I'd
class any exception to this rule.

Use this:

..menu p {property: value;}

This styles any p found within an element classed "menu".

Just wondering about creating "custom tags" instead of classing a span.
Saves a bit of typing.

Nah, you don't want to go there.

 

[Noozer]

Use this:

.menu p {property: value;}

Thanks! I kept trying "p .menu {.."

This styles any p found within an element classed "menu".


Nah, you don't want to go there.

Didn't think so.

Thanks again!

 

[Toby Inkster]

<p>This sentence has a <red>RED</red> word in it.</p>

It can be done, but it's probably a dumb idea.

Create a file called, say, MyHTML401.dtd and put the following in it:

========================================================
<!ENTITY % fontstyle "TT | I | B | BIG | SMALL | RED ">
<!ENTITY % HTML401 PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html401/strict.dtd">
%HTML401;
========================================================

Note: if you use the features of HTML 4.01 Transitional, you'll want to
change the 4th and 5th lines. Note also: you can add some more custom
tags after red, using the pipe (|) seperator symbol. Make sure you leave
the existing "TT | I | B | BIG | SMALL" there though (unless you don't use
those tags).

Then upload that file somewhere, to http://example.com/MyHTML401.dtd for
example.

Then at the top of each page you write, include the following special
doctype:
<!DOCTYPE html SYSTEM "http://example.com/MyHTML401.dtd">

Now you have added some custom tags, you'll want to define what they "do".
You can do this with CSS:

red { color: red; font-weight: bold; font-size: bigger; }

But as I said, this is probably a dumb idea. The only time you're really
likely to want to add in your own tags is when you want to use
non-standard HTML extensions like <nobr>, <blink> or <marquee> but still
care about your HTML validating.

 

[Neal]

Didn't think so.

Though think about this too. If you use span, there's no effect in a
no-CSS environment. So ask yourself, why am I making this text red?

Is it to emphasize the text? Then try

em.foo {color: red; font-style: normal;}

<p>I am emphasizing a <em class="foo">word</em> in this paragraph.</p>

CSS will make it red, non-CSS will do whatever it does with em.

Is it simply to decorate the text? Then use span, as the decoration
carries no meaning.

Always consider the semantic need for any special things you want to do,
and use semantic markup when appropriate - even if you totally change the
rendering of that element.