how to properly use CSS Class and ID [closed] - html

Question

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Just after some beginner advice please on how to properly arrange some CSS.
I have a basic 3 page website. Each page will all display a footer at the bottom.
The footer will keep the main styles the same across each page (things like width, height etc) but I'd like to change other styles dependant on which page I'm on (background color, font color). I know this can be done, but I'm looking for some tips on the correct syntax to use so don't learn using bad habits, unless of course this is already correct?
What I have in the CSS is:
.footer
{
width: 100%;
height: 100px;
border: 1px solid black;
text-align: center;
}
#footer_page1
{
background-color: red;
font-color: white;
}
#footer_page2
{
background-color: blue;
font-color: white;
}
#footer_page3
{
background-color: white;
font-color: black;
}
...and to call it in the HTML I have:
<div class="footer" ID="footer_page1">
Some text here
</div>
Is this OK, or should this be done a better way?
Many thanks.

Answer 1

you should use id #footer and class .page1, .page2, .page3 etc. - it is a better attempt because you still got the same footer (so ID should be the same) and you just want to change something (which can be done using different classes)
EDIT: and a quick tip from me: be carefull of setting width: 100% and border: 1px solid black because border isn't computed in item's width unless you set box-sizing: border-box property
what do I mean is that if you have a 1024px wide screen, your footer with css that you have presented will be 1026px wide with 2px cropped on the right side

Answer 2

When you refer to an id or class in css, you must use the full name of the class or id you are selecting. For example, when you want to refer to a div element that has id="someid" you must write #someid { in your stylesheet to reference this div by id.
Anyway, you're thinking about it right but your syntax is a bit off. Here is what you might be looking for:
/* common footer code goes here */
.footer
{
width: 100%;
height: 100px;
border: 1px solid black;
text-align: center;
}
/* code specific for each page goes here */
#page1.footer
{
background-color: red;
font-color: white;
}
#page2.footer
{
background-color: blue;
font-color: white;
}
#page3.footer
{
background-color: white;
font-color: black;
}
Using two selectors in the same line is called selector chaining. In this case, you want to chain an id selector with a class selector.
Edit:
Here is a jsfiddle.
Looking at your code, the obvious "bad habit" one could find is that the ids page1, page2, and page3 are all in the footer div of those pages, which is a bit confusing, as "page" doesn't exactly uniquely define a footer.
Make sure you only use one id of the same name on any page, and if you do use an id, it should describe that element uniquely.
As the others have said, it should be noted that recently it has become good practice to avoid using ids (except for javascript functionality). Using only classes whenever possible is now the standard. It's good to know how to preform selector chaining and of course proper syntax is always important.

Answer 3

It's inadvisable to use IDs in CSS at all although it can be useful sometimes. In fact I would advise against using anything except classes and pseudo-classes and occasionally attribute selectors (although I personally use ID and element selectors all the time mostly out of laziness). The reason for this is so that you only have to work with one level in the cascade which simplifies things quite a lot in your stylesheets, especially if they grow very large.
.footer { /* default styles */ }
.page1 { /* this is already after the .footer ruleset, so it overrides
the earlier rules automatically (by the nature of CSS */ }
.page2 { /* and so on */ }
<div class="footer page1">
Some text here
</div>
You could also add the class to the container of the entire page or something, which may make more sense. That way you can manipulate the header and footer rulesets simultaneously:
.footer {}
.header {}
.page1 .footer {}
.page1 .header {}

Answer 4

You need to select <div class="footer" ID="page1"> by .footer#page1.
I would recommend to use class for page#, because ID should be unique in one page, but ID="page1" might be used frequently.
Finally result can be
.footer
{
width: 100%;
height: 100px;
border: 1px solid black;
text-align: center;
}
.footer.page1
{
background-color: red;
font-color: white;
}
.footer.page2
{
background-color: blue;
font-color: white;
}
.footer.page3
{
background-color: white;
font-color: black;
}
with
<div class="footer page1">
Some text here
</div>