When to use id's and classes and when neither just standard tags

[j.smith1981]

I am just getting to grips with a book on CSS.

 

It's given me some really good advice about what to use and when not to use either standard tags, like h1 or p within div (divide sections) of my website.

 

For the instance of a blog, blog messages would ideally be put in a div tag like:

<div id="posts">

 

Then all posts within that could have the following:

<h1>My first post</h1>
<p>Details of my first post</p>

<h1>My second post</h1>
<p>Details of my second post</p>
</div>

 

Formatting those tags like so with the CSS:

 

* {
/* All that goes in here are applied to all the document */
}

#posts h1 {
font-size: 14pt;
font-weight: bold;
}

#posts p {
/* this would apply to the heading in posts div */
font-size: 12pt;
/* Wouldn't appear bold */
}

 

Would that be efficient enough?

 

Just questioning my new CSS knowledge from that book.

 

Any general advice would be really appreciated, even if I am thinking this through correctly, it's had a massive impact on me wanting to progress with this book, just it says don't ever over use classes or id's use them when absolutely necessary.

 

When you start to over use a particular class or id or even div's, it explains your probably not being as efficient as you should be.

 

Good tips really, but as I said, any advice is helpful!

 

I was wanting to convert my knowledge onto a project blog I am doing for myself, got the schema sorted I think.

 

Thanks for reading and I look forward to any replies,

Jez.

[dropfaith]

for things that are repeated like posts i wouldnt use an ID i would use a class.

 

http://cssfreakie.blogspot.com/2011/04/class-ids-and-selectors-rocket-science.html

 

will probably explain it better then i will tho

[cssfreakie]

using an ID selector or class really depends on the situation.

 

With the little code you showed it could very well be a good practice to use an #id.

Although it might seem weird at first.

 

As you might know id's are unique and you can only use them ones, but that doesn't mean you can't use them more them ones to select inner elements.

 

Say I want to give each paragraph inside a specific div a padding of 10px; Now you probably think ok so those <p>'s are not unique so I should use a class. Well Those paragraphs may not be unique but the container holding all those paragraphs is unique, because they all have a padding of 10 px, while other paragraphs in a different div don't have that padding.

 

So instead of doing this:

 

<div>
<p class="my-padding-class"> heloo</p>
<p class="my-padding-class"> heloo</p>
<p class="my-padding-class"> heloo</p>
<p class="my-padding-class"> heloo</p>
</div>

with a style of

.my-padding-class{
padding:10px 0;
}

which seem okay, but if you look closely it's redundant. you can better do:

 

<div id="wicked-paragraph">
<p> heloo</p>
<p> heloo</p>
<p> heloo</p>
<p> heloo</p>
</div>

 

with a style in the style sheet of

 

#wicked-paragraph p{
  padding:10px 0;
}

 

which selects all p's inside the #id's of wicked-paragraph

 

So do not underestimate id's! combine id's, selectors and classes until you have the most efficient mixture. But keep in mind Id's are unique, so only apply them ones to the specific element that holds it.

[crmamx]

I knew that!...