SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dots & Hashes: What's the difference?

    In CSS, I see styles referred to with either a preceding dot (.) or hash (#). I think that those styles preceded by a # refer to those tags with an ID specified e.g.
    Code:
    <style>
      #mydiv{font-weight: bold;}
    </style>
    <div id="mydiv">This is in bold</div>
    whereas those styles preceded by dots refer to those tags where a class has been specified e.g.
    Code:
    <style>
      .mydiv{font-weight: bold;}
    </style>
    <div class="mydiv">This is in bold</div>
    Is this oversimplified?
    Are there reasons why either or - in some cases - both styles of style are used?
    Is the hash method the lazy way of pointing to a specific tag whereas the dot shows that the style is a sub-style?


    Thanks,

    Andy
    From the English nation to a US location.

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Here's the difference:
    An ID is marked by the hash (#). The ID must be unique; by that I mean, you cannot have two elements with the same identifier on the same page (wouldn't be much identification that way).

    If you want more than one element to be styled a certain way, use class notation, marked with the dot (.). This will allow you to specify any element's style, as long as you have something like <a href="index.html" class="foo"></a>.

    Hope this helps!

    EDIT: As an alternative you can use inheritance to define your styles. Basically what you define in a parent tag will "inherit", or carry over, to the child tags. Here's a quick example: say you have a div called "content" that your content will be going in. If you don't want to specify a class for each <p> element in your content div, you can do something like this:
    Code:
    <style type="text/css" media="screen">
    div#content {
      width: 50%;
      font-size: .8em;
    }
    div#content p {
      font-family: geneva, arial, helvetica, sans-serif;
    }
    </style>
    The paragraph tags in the content div will not only get a geneva or arial font (depending on platform/browser/etc.), but the font size will also be .8em, as specified in your #content declaration. Inheritance is noted by the space between the parent and child elements. You can also specify the same style for multiple classes/elements/ids by comma-separating them in your styles. For example:
    Code:
    <style type="text/css" media="screen">
    p, blockquote, li, h1 {
      font-family: geneva, arial, helvetica, sans-serif;
      color: #006;
      background-color: transparent;
    }
    </style>
    This will set all <p>, <blockquote>, <li> and <h1> elements to geneva/arial font, with blue color and a transparent background color.
    Last edited by vgarcia; Feb 17, 2003 at 10:07.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •