A few CSS questions.

[daedal]

Ok, working on a revision of my style sheets for an upcoming project and I have a few questions. I'm still learning CSS so bear with me here! I will ask my questions as they hit me.

What is the difference between #name {} and .name {} ?
[EDIT] Found my answer. From what I've read, the # prefix should be used for Divs and are only used once on a page. I don't see why I would use that instead of regular (dot) prefixes though?

 

[Steve_Oaks]

Ok, working on a revision of my style sheets for an upcoming project and I have a few questions. I'm still learning CSS so bear with me here! I will ask my questions as they hit me.

What is the difference between #name {} and .name {} ?
[EDIT] Found my answer. From what I've read, the # prefix should be used for Divs and are only used once on a page. I don't see why I would use that instead of regular (dot) prefixes though?

#Name { } is for IDs. Only one element should use an ID.

.Name { } is a class. A class can be used (or as programmers like to call it, instatiated) as many times as you would like throughtout the document.

Why? Because an ID is suppose to be a reference to just one instance. Where as if you know anything about object oriented programmin you know that classes are for instatiating many objects and other classes off of.

 

[daedal]

Gotcha. But is that really necessary?
Can't all object use classes, or some are restricted to use IDs?

 

[CEpeep]

An ID has a higher value in the cascade than a Class. Its rule essentially trumps all the classes. It starts becoming necessary when you've nested a bunch of divs and need one inside the nest to not inherit the rules of the ones it's nested in, so you use an ID to override all the rules set before that you no longer want.

 

[KingKaeru]

Examples:

  .person {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 0.85em;
  }

  #kingkaeru {
    color: #00FF00;
  }

  #daedal {
    color: #FF0000;
  }

<span class="person" id="daedal">Hello my name is daedal</span>
<span class="person" id="kingkaeru">Hello my name is KK</span>

--KK

 

[animeguru]

I also tend to use IDs and Classes as logical keys for my layout. Meaning that I'll assign an ID to something that should only ever be used once on a page. That way, I know instantly (and others following behind me) will know that those rules are meant for one specific instance, even if it doesn't need to override previous rules.

I hope that makes some sense.

 

[KingKaeru]

exactly. Here's another example to look at.

Suppose you want to post a sentence in red in your website as an "alert message".

  .blog {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 0.7em;
  }

  #alert {
    color: #FF0000;
  }

  <div class="blog">
    <span id="alert">Site will be down tomorrow for maintenance</span>
    <p>More text...</p>
  </div>

The above works fine and you know that #alert will be used only once on the page. What happens when you have multiple blog entries with "alerts"? This is when a class would be more appropriate.

Incorrect

  .blog {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 0.7em;
  }

  #alert {
    color: #FF0000;
  }

  <div class="blog">
    <span id="alert">Site will be down tomorrow for maintenance</span>
    <p>More text...</p>
  </div>

  <div class="blog">
    <span id="alert">Holloween party this weekend.  Dont forget!</span>
    <p>More text...</p>
  </div>

It would be more appropriate to separate out the style into a class as it will be used more than once.

Not Incorrect (double negative because it's not the only way to do this.)

  .blog {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 0.7em;
  }

  .alert {
    color: #FF0000;
  }

  <div class="blog">
    <span class="alert">Site will be down tomorrow for maintenance</span>
    <p>More text...</p>
  </div>

  <div class="blog">
    <span class="alert">Holloween party this weekend.  Dont forget!</span>
    <p>More text...</p>
  </div>

--KK

 

[maw]

I also tend to use IDs and Classes as logical keys for my layout. Meaning that I'll assign an ID to something that should only ever be used once on a page. That way, I know instantly (and others following behind me) will know that those rules are meant for one specific instance, even if it doesn't need to override previous rules.

I hope that makes some sense.

yup.. enough cannot be said about the value of "semantic" CSS. Months or even years after you write your CSS, you or someone else looking at it should be able to quickly determine how each class and ID affects the entire site.

Example, lets say you have a parent div that contains all the elements of your page. You have a couple options, make it an ID named "container" or a class named "box". A couple years go by and i need to update the look and feel of the website you created.

an ID called "container" has a lot more semantic meaning than a class called "box", even though both might be used for the exact same purpose. If i look in the CSS and see #container, this immediately tells me it occurs only once in a page and the name container tells me it probably encompasses most if not all of the other elements in the page. So if i make a change to "container", I can expect a specific type of change a specific aspect of the page..

But if i see .box, what does that mean? first off, since it's a class, it could occur a bunch of times thoughtout each page, and the name "box" doesn't really describle anything meaningful, so if i change something in .box I have no idea how many parts of the page i might be affecting.

 

[jrbryner]

I have no experience with AJAX yet, but doesn't that identify page parts by IDs?

 

[maw]

I have no experience with AJAX yet, but doesn't that identify page parts by IDs?

yes, but that's an in an entirely different context.