Forum Moderators: not2easy
I have a couple questions.
Q.1. I have a CSS navigation i'm working on. Is there a rule you have to follow when designing the navigation in order to get the navigation to work/display properly?
>>What i mean to say is, if i design the nav like this:
#nav a { display: block;
color: #FFFFFF;
text-align: left;
width: 200px;
font-family: arial, sans-serif;
text-decoration: none;
font-size: 12px; }
etc...
>>Then modify it by changing/moving around the declarations like this:
#nav a { display: block;
color: #FFFFFF;
font-size: 12px; }
width: 200px;
text-align: left;
text-decoration: none;
font-family: arial, sans-serif; }
Q.1. Will it still display correctly when online? (Works fine on my pc.)
Q.2. What about if i move say for instance the
#nav ul { list-style-type: none;
padding: 0; margin: 0; }
>after the
#nav a { display block; etc. etc.}
Like this:
#nav a { display block; etc. etc.}
#nav ul { list-style-type: none;
padding: 0; margin: 0; }
etc.
Q.3. Will it still display properly online?
Will it work at all?
Q.4. What about the moving around(the order.
one before the other.) the *rest* of the selectors such as:
#narea a:hover { } and the #narea li { }?
Q.5. Will it still work?
Q.6. Or will it not work at all?
I ask because i'm still learning css and i can't find any information on how to use css correctly. Basicly i just study the online tutorials and they don't speak of any rules you must follow in order to make the navigation work. So i was just wondering if you could help so i know what i can and what i should not do with CSS.
Well,...
*Please answer each question:)
Thank you very much for your help:)
I appreciate it.
frenzy77
Have you googled this?
WebmasterWorld google:
Webmaster world horizontal nav tutorials [google.com]
Webmasterworld Vertical Navigation Tutorials [google.com]
Webmaster world css tutorials [google.com]
Web Google:
Horizontal Navigation [google.com]
Horizontal Navigation Tutorials [google.com]
vertical navigation [google.com]
Vertical Navigation Tutorials [google.com]
CSS tutorials [google.com]
Make google your friend in here and on the web. There is tons of information out there if you are teaching yourself. I should know ;) I have been self teaching for a while now. And, I feel that in most cases its better to read and learn and then ask questions as you will have a better base to ask from. If you don't know about the navigations, and how they work, no matter how someone answers you in here, you won't grasp it. There are several different navigation set ups. An answer to one, might not work for the other. And how it looks in one browser, doesn't mean that its going to look the same in another browser.
hth!
As to your questions regarding the order of rules in CSS, without knowing the details of your code and application, it's impossible to answer with specifics, however there are some general rules regarding cSS order that we can share.
The important thing to remember about CSS is the "C" part; i.e., they are cascading style sheets. As the browser reads the file, it applies rules to all elements that match a selector, and, when it's an inheritable property, to the children of that element. This means that putting your CSS in the wrong order can result in rules being overridden by other rules that you did not intend to have overwrite them.
That said, it actually somewhat difficult to do, because of something called "specificity," which a rating given to a selector that ranks its importance in relation to other, possibly conflicting rules.
Say I have a UL and I want all of the LI text to be red, except where I have a sub-list; I want that text to be green...
html:
<ul>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a>
<ul>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
<li><a href="#">Lorem ipsum</a></li>
</ul>
</li>
</ul>css:
ul a{color:red;}
li ul a{color:green;}
I can switch those two rules declarations around and the code works fine, because the specificity of the second rule is higher than the first, and it's location in the file doesn't change that. The second rule matches to UL tags inside of LI tags, so even if the styles for the lonely UL came second, it would still have a lower specificity than the LI UL selector.
In MOST cases, specificity will take care of things for you. When you write a selector to match to a certain element, 9 times out of 10 the resulting selector could be placed anywhere you want and not effect the outcome. Especially if you use decendant selectors in conjunction with classes and IDs, which have very high specificity.
One exception is when using the link and dynamic pseudoclasses -- :link, :visited, :hover, :active, :focus. These pseudoclasses all carry the same specificity, so when applied to identical link selectors in an effort to create rollover effects, their order in the code is critical. In this special case, the ones that come later in the code will override ones that come earlier, so they must be specified in the right order. A mneumonic that might help you remember that order is LoVe/HAte, for :link, :visited, :hover, :active.
The order of properties within a rule declaration doesn't make any difference at all, UNLESS it's a case of the same property showing up twice in the same selector.
For instance, say you want three sides of a paragraph to have a 1px black border, but you do not want the right side to have a border. You could specify three border properties...
p {
border-top:1px solid #000;
border-bottom:1px solid #000;
border-left:1px solid #000;
}
...or you could save a few keystrokes and set a whole border, then remove the one from the right....
p {
border:1px solid #000;
border-right:0;
}
...If you were to switch those two around in the code, your paragraph would have a border on 4 sides, because the full border would override the right border of 0.
Likewise, if you have two selectors that target the same element, and those two selectors provide values for the same properties, the one that comes LATER in the code will override the one that comes earlier.
And then there are rules governing how this is handled between multiple stylesheet sources, including inline styles, internal styles, external stylesheets, and stylesheets that are imported by other stylesheets. Tutorials and articles abound online with information about all this stuff.
My suggestion would be to track down a few of the better bloggers on standards based design (a few names worth looking into: John Hicks, D. Keith Robinson, Roger Johansson, Douglas Bowman) read their stuff, and follow links in their blog rolls to other people writing on these topics. Some of the best informative writing on using CSS can be found in this way.
cEM
