I'm always trying to improve the quality of my code, keep it the a minimum and keep css in an external sheet. Could you help me with some fuzzy areas? 1) I often run into a situation where I have one div that exists only once on the whole site and it needs some unique css. Is it really worth making a class or id for this one div? I don't want to do inline, the goal is to have everything in an external css. I'm wondering what is the best practice for this situation? What if you have many unique boxes? 2) I am a bit fuzzy about ids and classes. I know classes can be used all over the place but a particular id can only be used once per page. I think you can use a class and id in the same div. This might help solve my problem but then I'll have a ton of ids in my css file. Please Help!
You can use a ID and a class on the same div. The other thing that might help you is that you can have more than one class on the same div. so you would put (for example) class="rounded red hilite" This allows you to create the basic structure that is the same for a lot of boxes ("rounded" in my example), then add details that are different for one box ("red", for example might just have a different background color than the default box). You can then even mix and match styles to create unique looks with less code. The other thing that might help is that you can use drill-down to specify what you want. So if you want boxes in the left column to look different than boxes in the right column, you would specify that in your css like this: #left .box { } #right .box { } you can put up a sample of your code if you are looking for help with something specific.
Wow that really helps! Thanks, that cleared some stuff up. So in the last part you're calling on all elements that have an id of LEFT and class of BOX, right? Would it apply to something that has LEFT, BOX and another class? You can have many classes on one element but can you have a few different ids on an element? I know one specific element per page but when not a few on one div?
Testing the idea and the "#green .left " isn't working but everything else is. Where am I going wrong? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- .left {float:right} .box {width:100px; height:100px;} .pad {padding:10px;} #green {background-color:#093;} #green .left{font-size:16px;} --> </style> </head> <body> <div class="box" id="green">box</div> <div class="box pad" id="green">box green</div> <div class="box left" id="green">box left</div> <div class="box pad left" id="green">box green left</div> </body> </html>
#green .left - means something with the class "left" inside of something with the ID green: <div id="green"> <div></div> <div class="left"></div> <div></div> </div>
also, in your example - you have 4 divs with ID "green" - you can't do that <div id="green"> <div class="box">box</div> <div class="box pad">box with padding</div> <div class="box left">box left</div> <div class="box pad left">box left with padding</div> <div class="box pad left green">green box left with padding</div> </div>
If you want to do what you're trying you add the two classes inside the class attribut like this; <div class="txStandout txBold12"> With this, if I have a class 'txStandout' (I usually have a contrasting color, maybe underline, etc) then another css class txBold12, I can add both those styles to the one tag. To designate them both in the actual style you're creating. morework above explains that quite adequitely.
Also try to limit the amount of classes you acutally have to use. You don't always have to add a class to every div you create and try to always use the id your using on all elements you might have on your site. This allows you to update #yellow .pad without changing the padding of #green .pad and allows you to easily keep maintanice of your styles on your page/site. Also you can select tags in css by using there tag name. So div { width: 10px; } would set all the divs with a width 10px or you can use #green div { width: 100px;} would set all the divs under the div with the id green to have the width 100px; Hope this helps you out as well. My main advice is always try to limit the amount of class names you use. Often they aren't needed. <style type="text/css"> <!-- #green .left, #yellow .left {float:left; font-size:16px;} #green .pad {padding:10px;} #green div {width:100px; height:100px;background-color:#093;} #yellow .pad {padding:20px;} #yellow div {width:150px; height:110px;background-color:#ffcc00;} --> </style> </head> <body> <div id="green"> <div>box</div> <div class="pad">box with padding</div> <div class="left">box with float left</div> <div class="pad left">box with padding and float left</div> </div> <div id="yellow"> <div>box</div> <div class="pad">box with padding</div> <div class="left">box with float left</div> <div class="pad left">box with padding and float left</div> </div> </body>