W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > April to June 2005

Re: Inline Style Sheet Question

From: Tina Holmboe <tina@greytower.net>
Date: Thu, 7 Apr 2005 23:54:39 +0200 (CEST)
Message-Id: <200504072154.j37LsdZX014218@asterix.andreasen.se>
To: w3c-wai-ig@w3.org

On  7 Apr, Beheler Kim wrote:

> style? But by default the <p> tag creates a break after the closing
> </p>. So if I created two separate styles in my style sheet for the
> <p> tag, how would I remove the break?

  You have two issues here. First, the paragraph. Keep in mind that

     <p>here is my</p><p class="bold">paragraph.</p>

  are actually *two* paragraphs, and not one. In order to maintain a
  reasonable structure this type of code would not be an option.
  However, removing the space after a paragraph would be the task of the
  CSS margin property, possibly also display.

  In your case, on the other hand, a better solution would be:

   p {
    color : red ;
   }

  and

   <p>
    This is my <span style="color: red ;">paragraph</span>.
   </p>

  alternatively

   <p>
    This is my <span class="logicalSomething">paragraph</span>.
   </p>

  In this case I've chosen <span> because I lack information about what
  that single word is, and why it should be in red. It could, for
  instance, be that you mean to emphasise the word, in which case the
  following is to be preferred:

   <p>
    This is my <em>paragraph</em>.
   </p>

  with the style of the <em> changed to show red text*. There is nothing
  inherently evil or wrong in using the style attribute, but don't
  overdo it - maintenance hell is surely around the next corner.

  On the other hand, if what you intend to do is a logical action and
  repeated, a class would be perfect. Imagine that you want a special
  style for all words written in latin. The following would then be
  better than using style:

   <p>
    The <span class="birdName" lang="la">pica pica</span> is commonly
    black, whilst the <span class="felineName" lang="la">lynx lynx</span>
    is most often golden-brown.
   </p>

  with the CSS

   .birdName, .felineName {
    font-style : italic ;
   }



  In summary: if all you want to do is change the colour of one word
  in one position 'cause it would look cool in red ... then putting a
  span around it with a style attribute is fine. If a more appropriate,
  inline level, markup - such as em - exist, that should be used instead
  and styled. Finally, if the style has a purpose - in particular one
  which will be repeated - then add a class with a logical name which
  can be reused.

  Hope this helps.



 *
  Note that it is a good habit to always define foreground and background
  colours together. I've left this out for brevity.

-- 
-- 
 -    Tina Holmboe                    Greytower Technologies
   tina@greytower.net                http://www.greytower.net/
   [+46] 0708 557 905
Received on Thursday, 7 April 2005 21:54:42 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 19 July 2011 18:14:21 GMT