Forum Moderators: not2easy
h1,h2,h3 {...}
spaces, semi-colons on the very end, specifying individual border widths vs. all-in-one, and shorthand techniques of all kinds.
Also, is it necessary to have both of these:
* {padding:0; margin:0; border:0;}
.* {padding:0; margin:0; border:0;
commas between multiple declarations,
h1,h2,h3 {...}
Yes, these are necessary, because without the commas the above style declaration would apply to h3 tags inside an h2 tag which is inside an h1 tag.
semi-colons on the very end
I like to use a semi-colon after my last item so that if I add more declarations later, or move them around, or whatever, I don't have to remember to add the semi-colon. It's not necessary, though, simply a practice that I find helpful.
Using shorthand, individual border widths, etc. I vary depending on what properties I'm setting.
The * and .* I dunno if they're both needed. I'd hazard a guess that using both might be needed because of some failure on the part of Explorer. Much of the redundancy in css is needed for that reason.
- First, use meaningful names. Something like "#nb" may be quicker to type throughout your code, but when you return to edit it after months or longer, you'd really rather be looking at something like "#navbar", at least. (Actually, I prefer "#navigation", since it may not take the shape of a bar in your next design.)
- Second, only use shorthand notations (ie border: 1px black solid) when you're pretty sure you won't be tooling around with the individual attributes, ah, individually at a later date... Remember, when you do change things, you want to change them one thing at a time (to figure out if and where it breaks) -- while shorthand doesn't prevent you from doing this in any way, it doesn't match the process syntactically. A minor point, but still helpful enough to make a habit of.
Generally, readability should come before space economy. Stuff like:
#show { text-indent: 40px; width: 500px; margin-left: auto; margin-right: auto; border-left: 1px black solid; border-right: 1px black solid; padding: 6px; padding-top: 0px; text-align: justify; }...may validate, and it may take up less space (though if you're keeping your CSS in .css files, I don't know why you should worry about it taking up too much visual space), but it doesn't lend itself to future modification or reuse at all. A few extra new-lines aren't going to choke your bandwidth, but they will save you time and stress when you decide that hey, this element would look a bit better like this...
I'm not sure I agree that readability should come before space economy because of search engines calculating your content/code ratio and using that in your ranking. I actually keep my CSS declarations right in the <head> so there is no pop-in when a user comes to my site for the first time.
One other thing. I've noticed a lot of people use the # in front of a CSS declaration. Is that necessary?
#exampleID {}
.exampleClass {}
Classes and ID's work exactly the same as far as styling goes, but there is one major difference:
An ID can only be used once per page. They're useful for designating page elements such as "Content," "Navigation," etc.
Classes can be used as many times on a page as necessary. So, they're good for designating page elements such as "p.small" (for "small" type in paragraphs) or ".notice" (which might be useful to apply to any element that you wish to stand out).
You don't need to specify an element. You can specify ID's and classes by specifying the element or leaving the element out of the selector. Here's an example using ID's:
Selectsdiv#Content {}
<div id="Content">Selects any element where#Content {}
id="Content"And likewise for classes:
Selects every instance ofp.small {}
<p class="small">Selects all elements where.small {}
class="small"I tend to prefer leaving the elements off my ID and class selectors, so I can choose what fits best on each page. For instance, I often set up a rule that simply needs to be applied to a block-level element. Then, I know that I can use whatever is semantically best on each page.
