Dots & Hashes: What's the difference?

HTML & CSS
1

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.

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

<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

2

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:


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


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