CSS formatting questions...

Discussion in 'HTML' started by Noozer, Sep 30, 2004.

  1. Noozer

    Noozer Guest

    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!
    Noozer, Sep 30, 2004
    #1
    1. Advertising

  2. Noozer

    Neal Guest

    On Thu, 30 Sep 2004 15:40:45 GMT, Noozer <> wrote:

    > 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,


    No way. span is inline, like <em> or <strong>. It's not a block element.

    > 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.
    Neal, Sep 30, 2004
    #2
    1. Advertising

  3. Noozer

    Noozer Guest

    > > <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;}


    Doh! Makes sense.

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


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

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

    That's what I thought.

    > > 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;}


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

    Thanks!
    Noozer, Sep 30, 2004
    #3
  4. Noozer

    Neal Guest

    On Thu, 30 Sep 2004 16:11:36 GMT, Noozer <> wrote:

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

    >
    > 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.
    Neal, Sep 30, 2004
    #4
  5. Noozer

    Noozer Guest

    "Neal" <> wrote in message
    news:eek:...
    > On Thu, 30 Sep 2004 16:11:36 GMT, Noozer <> wrote:
    >
    > >> You should class the p, so you can set no bottom margin just on the

    ones
    > >> you want.

    > >
    > > 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;}


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

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


    Didn't think so.

    Thanks again!
    Noozer, Sep 30, 2004
    #5
  6. Noozer

    Toby Inkster Guest

    Noozer wrote:

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

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Now Playing ~ ./killers/hot_fuss/02_mr_brightside.ogg
    Toby Inkster, Sep 30, 2004
    #6
  7. Noozer

    Neal Guest

    On Thu, 30 Sep 2004 18:12:46 GMT, Noozer <> wrote:

    > "Neal" <> wrote in message
    > news:eek:...
    >> On Thu, 30 Sep 2004 16:11:36 GMT, Noozer <> wrote:
    >> > Just wondering about creating "custom tags" instead of classing a

    >> span.
    >> > Saves a bit of typing.

    >>
    >> Nah, you don't want to go there.

    >
    > 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.
    Neal, Sep 30, 2004
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Dave
    Replies:
    2
    Views:
    534
    Steven Cheng[MSFT]
    Nov 22, 2004
  2. Replies:
    0
    Views:
    737
  3. Brian Tozer

    Text formatting CSS query

    Brian Tozer, Oct 3, 2003, in forum: HTML
    Replies:
    7
    Views:
    491
    brucie
    Oct 3, 2003
  4. John Salerno

    Two questions about formatting

    John Salerno, Jan 31, 2006, in forum: HTML
    Replies:
    19
    Views:
    630
    Jukka K. Korpela
    Feb 2, 2006
  5. Adam Sandler
    Replies:
    0
    Views:
    342
    Adam Sandler
    Feb 27, 2007
Loading...

Share This Page