CSS applied on a per character basis?

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

  1. Noozer

    Noozer Guest

    I'm pretty sure that the answer is "no", but it doesn't hurt to ask...

    What is the best way to apply CSS formatting to single characters of text?

    For example, what if I want a style the places a 1 pixel green border around
    each character?

    One method that I know works:
    CSS:
    .box { border: 1px solid #00FF00; }

    HTML:
    <span class="box">T</span><span class="box">h</span><span
    class="box">e</span>

    .... puts "The" onto the page with a 1 pixel green border around each letter.

    Sure seems like the hard way to do something that should be simpler. Is this
    there an easier way?
    Noozer, Dec 30, 2004
    #1
    1. Advertising

  2. Noozer

    Sid Ismail Guest

    On Thu, 30 Dec 2004 20:27:55 GMT, "Noozer" <> wrote:

    : I'm pretty sure that the answer is "no", but it doesn't hurt to ask...
    :
    : What is the best way to apply CSS formatting to single characters of text?
    :
    : For example, what if I want a style the places a 1 pixel green border around
    : each character?
    :
    : One method that I know works:
    : CSS:
    : .box { border: 1px solid #00FF00; }
    :
    : HTML:
    : <span class="box">T</span><span class="box">h</span><span
    : class="box">e</span>
    :
    : ... puts "The" onto the page with a 1 pixel green border around each letter.
    :
    : Sure seems like the hard way to do something that should be simpler. Is this
    : there an easier way?
    :


    No. You did fine. bte, don't u want padding?

    Sid
    Sid Ismail, Dec 30, 2004
    #2
    1. Advertising

  3. Noozer

    Noozer Guest

    > : What is the best way to apply CSS formatting to single characters of
    text?

    > : One method that I know works:
    > : CSS:
    > : .box { border: 1px solid #00FF00; }
    > :
    > : HTML:
    > : <span class="box">T</span><span class="box">h</span><span
    > : class="box">e</span>
    > :
    > : ... puts "The" onto the page with a 1 pixel green border around each

    letter.
    > :
    > : Sure seems like the hard way to do something that should be simpler. Is

    this
    > : there an easier way?


    > No. You did fine. bte, don't u want padding?


    Prolly... but keeping it simple for my example.
    Noozer, Dec 30, 2004
    #3
  4. "Noozer" <> wrote:

    > What is the best way to apply CSS formatting to single characters
    > of text?


    It depends.

    > For example, what if I want a style the places a 1 pixel green
    > border around each character?


    Stop wanting that.

    > <span class="box">T</span><span class="box">h</span><span
    > class="box">e</span>

    - -
    > Sure seems like the hard way to do something that should be
    > simpler.


    Why should it be simpler? You're not really supposed to do such things
    at all. In special cases, you might want to style an individual
    character, but using <span> is then tolerable. In some cases, you could
    use the :first-letter pseudoelement.

    But if you really, really wanted to style each character, you could use
    <span>T</span><span>h</span><span>e</span>
    without class attributes, though then you would need to take care of
    overriding your CSS rules for <span> in general when needed, if you use
    <span> for other purposes as well.

    You could even save typing by using <a> (without attributes) instead of
    <span>, but that's really trickery.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Dec 30, 2004
    #4
  5. Noozer

    Noozer Guest

    "Jukka K. Korpela" <> wrote in message
    news:Xns95CFEE91BC8D7jkorpelacstutfi@193.229.0.31...
    > "Noozer" <> wrote:
    >
    > > What is the best way to apply CSS formatting to single characters
    > > of text?

    >
    > It depends.
    >
    > > For example, what if I want a style the places a 1 pixel green
    > > border around each character?

    >
    > Stop wanting that.
    >
    > > <span class="box">T</span><span class="box">h</span><span
    > > class="box">e</span>

    > - -
    > > Sure seems like the hard way to do something that should be
    > > simpler.

    >
    > Why should it be simpler? You're not really supposed to do such things
    > at all.


    Hrm.. what if I want to simulate the Wheel of Fortune letterboard? Perfect
    example of needing to decorate individual characters. Using a SPAN for each
    letter is logical, but it does add a lot of overhead.

    > In special cases, you might want to style an individual
    > character, but using <span> is then tolerable. In some cases, you could
    > use the :first-letter pseudoelement.
    >
    > But if you really, really wanted to style each character, you could use
    > <span>T</span><span>h</span><span>e</span>
    > without class attributes, though then you would need to take care of
    > overriding your CSS rules for <span> in general when needed, if you use
    > <span> for other purposes as well.
    >
    > You could even save typing by using <a> (without attributes) instead of
    > <span>, but that's really trickery.


    True, but definately not kosher.

    I just wanted to make sure that I hadn't overlooked some CSS
    attribute/functionality that would negate the need for all the SPAN tags.
    Noozer, Dec 30, 2004
    #5
  6. Noozer wrote:

    > Hrm.. what if I want to simulate the Wheel of Fortune letterboard?
    > Perfect example of needing to decorate individual characters. Using
    > a SPAN for each letter is logical, but it does add a lot of
    > overhead.


    Just for kicks, see my visitor counter. <g>
    http://home.rochester.rr.com/bshagnasty/

    Uses the CSS:

    ..cnt {
    background-color: #000;
    border-top: 2px outset #d0d0d0;
    border-left: 2px outset #d0d0d0;
    border-right: 2px outset #a9a9a9;
    border-bottom: 2px outset #a9a9a9;
    color: #32cd32;
    font-size:175%;
    text-align: center;
    margin: 0 -0.2em 0 0;
    padding: 0.1em;
    width: 1.1em;
    }

    --
    -bts
    -This space intentionally left blank.
    Beauregard T. Shagnasty, Dec 30, 2004
    #6
  7. Noozer

    rf Guest

    "Beauregard T. Shagnasty" <> wrote in

    > Just for kicks, see my visitor counter. <g>
    > http://home.rochester.rr.com/bshagnasty/
    >
    > Uses the CSS:
    >
    > .cnt {

    ....
    > }


    Hmmm.

    ..cnt span
    {
    ....
    }

    <p class="cnt>
    <span>&nbsp;</span>
    <span>4</span>
    ....

    --
    Cheers
    Richard.
    rf, Dec 30, 2004
    #7
  8. rf wrote:

    > "Beauregard T. Shagnasty" <> wrote
    >
    >> Just for kicks, see my visitor counter. <g>
    >> http://home.rochester.rr.com/bshagnasty/
    >>

    > Hmmm.
    >
    > .cnt span { ... }
    >
    > <p class="cnt> <span>&nbsp;</span> <span>4</span> ...


    Ok ok... <g> All these hits have raised my counter, too.

    --
    -bts
    -This space intentionally left blank.
    Beauregard T. Shagnasty, Dec 30, 2004
    #8
  9. Noozer

    rf Guest

    "Beauregard T. Shagnasty" <> wrote:
    > rf wrote:
    >
    > > "Beauregard T. Shagnasty" <> wrote
    > >
    > >> Just for kicks, see my visitor counter. <g>
    > >> http://home.rochester.rr.com/bshagnasty/
    > >>

    > > Hmmm.
    > >
    > > .cnt span { ... }
    > >
    > > <p class="cnt> <span>&nbsp;</span> <span>4</span> ...

    >
    > Ok ok... <g> All these hits have raised my counter, too.


    What? Is it four million and two now?

    --
    Cheers
    Richard.
    rf, Dec 31, 2004
    #9
  10. rf wrote:

    > "Beauregard T. Shagnasty" <> wrote:
    >>
    >>Ok ok... <g> All these hits have raised my counter, too.

    >
    > What? Is it four million and two now?


    <p class="cnt">
    <span>&nbsp;</span>
    <span>5</span>
    <span>,</span>
    <span>0</span>
    <span>0</span>
    <span>0</span>
    <span>,</span>
    <span>0</span>
    <span>0</span>
    <span>0</span>
    </p>

    --
    -bts
    -This space intentionally left blank.
    Beauregard T. Shagnasty, Dec 31, 2004
    #10
  11. Noozer

    rf Guest

    "Beauregard T. Shagnasty" <> wrote
    > rf wrote:
    >
    > > What? Is it four million and two now?

    >
    > <p class="cnt">
    > <span>&nbsp;</span>
    > <span>5</span>
    > <span>,</span>
    > <span>0</span>
    > <span>0</span>
    > <span>0</span>
    > <span>,</span>
    > <span>0</span>
    > <span>0</span>
    > <span>0</span>
    > </p>


    WOW!

    That &nbsp; is reserved for future expansion?

    --
    Cheers
    Richard.
    rf, Dec 31, 2004
    #11
  12. rf wrote:

    > WOW!
    >
    > That &nbsp; is reserved for future expansion?


    Sure. With this exposure, I might get a lot more visits. Remember when
    odometers started having that extra digit?

    --
    -bts
    -This space intentionally left blank.
    Beauregard T. Shagnasty, Dec 31, 2004
    #12
  13. Noozer

    dorayme Guest

    Re: CSS applied on a per character basis? but really font-size

    > From: "Beauregard T. Shagnasty" <>
    > Newsgroups: alt.html
    > Date: Thu, 30 Dec 2004 17:03:22 -0500
    > Subject: Re: CSS applied on a per character basis?

    snip
    > Just for kicks, see my visitor counter. <g>
    > http://home.rochester.rr.com/bshagnasty/


    Saw your website. The blue box in the font size experiment does not work on
    my Mac, in IE all fonts get bigger when zoomed (9.1, IE 5.1.6). I have heard
    rumours about this sort of thing though... :)

    dorayme
    dorayme, Jan 19, 2005
    #13
    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. =?Utf-8?B?VGVycnk=?=

    Changing styles sheets on a per user basis

    =?Utf-8?B?VGVycnk=?=, Feb 4, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    362
    =?Utf-8?B?VGVycnk=?=
    Feb 4, 2004
  2. Replies:
    0
    Views:
    452
  3. muriwai
    Replies:
    2
    Views:
    578
    muriwai
    May 23, 2007
  4. Replies:
    14
    Views:
    524
    bijeshn
    Apr 8, 2008
  5. Yaroslav Klyukin

    Java CPU utilization on a per-thread basis

    Yaroslav Klyukin, Dec 22, 2008, in forum: Java
    Replies:
    1
    Views:
    1,536
    Mark Space
    Dec 22, 2008
Loading...

Share This Page