Jump to content

rules for multiple ids


dgorur

Recommended Posts

Hi,Newbie question: On the `pinned' CSS tutorial, it says here that one can refer to a rule pertaining to an element with a certain id this way:a#leftcol{color:red}I'm using an external stylesheet, and I do have an id called leftcol, and many properties such as text color, etc, are defined there, and they work fine. However, the above link definition refuses to work when invoked as follows. <div id="leftcol"><a href="http://www.stanford.edu/%7Edgorur"> Home</a><br><br></div>If I instead saya{color:red}it works. What am I doing wrong?Thanks,Dev

Link to comment
Share on other sites

a#leftcol is if your anchor has that ID. Instead you have a division with that ID, so you're probably looking for something like#leftcol a { color: red }ordiv#leftcol a { color: red }Also, leftcol is not a good name for an ID. ID and class names are part of the HTML and therefore should relate to content and not presentation. You never know if you want to change your "leftcol" to actually go to the right someday.

Link to comment
Share on other sites

I agree with F-Man. I would also make it a class since IDs are only supposed to be used once/page. Something called "red". You would not need to div in this case.HTML File:<a href="http://www.w3schools.com" class="red">W3Schools</a>CSS File:.red { color: red; }That means any tag that has a class="red" will make it red.

Link to comment
Share on other sites

Thanks, I'll use that. I guess I can also change the ID name to navbar or something. However, I don't quite see how ID names are part of content - in most examples I've seen they refer to presentation.Dev

a#leftcol is if your anchor has that ID. Instead you have a division with that ID, so you're probably looking for something like#leftcol a { color: red }ordiv#leftcol a { color: red }Also, leftcol is not a good name for an ID. ID and class names are part of the HTML and therefore should relate to content and not presentation. You never know if you want to change your "leftcol" to actually go to the right someday.

Link to comment
Share on other sites

Many examples do use class names and ids that are descriptive of presentation. I think it helps the learner understand better what is happening. Even an id like "navbar" would imply that it is to presented as a bar.It is a good idea to have the classes and ids describe the structure, but sometimes it is difficult to keep track of.It is more difficult than it seems to truly separate content from presentation. Many of the tags used in many designs may not have been there of ONLY the content and structure of the document was considered.Perhaps instead of "leftcol" you could use an id that describes the content instead of appearance - but for learning and studying purposes I don't think it is criticalI think that after reading many articles about css design, you will start to get a feel for what naming conventions you prefer...

Link to comment
Share on other sites

A good example which often holds true, is that a left column is used for menu content. So perhaps, instead of giving it the id "leftcol", you could give it the id "menu"? Someone looking at the code would then easily understand this is the code for the menu part of the site. If you named it leftcol, and later decided you wanted this particular division on the right side, it would be more difficult finding it for others, and one would have to look for recognisable content instead of code.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...