Forum Moderators: not2easy
The pages atrributes are set up through one stylesheet called stylesheet.css which looks like the following:
/* Link Atrributes */A:link{
color:990000;
text-decoration:none;
font-weight:none
}A:visited{
color:990000;
text-decoration:none;
font-weight:none
}A:active{
color:990000;
text-decoration:none;
font-weight:none
}A:hover{
color:000000;
text-decoration:none;
font-weight:none
}/* Page Attributes */
#content {
text-align: justify;
}#centre {
text-align: center;
}
However, I want a seperate stylesheet or command set for my navigation without it effecting the rest of my page.
I figured using Class Selectors would be a good idea, however, I don't understand them completly.
I want to use the following CSS for my navigation:
A.link{
color:990000;
text-decoration:none;
font-weight:none;
Width:100%;
Display: block;
}A:visited{
color:990000;
text-decoration:none;
font-weight:none;
Width:100%;
Display: block;
}A:active{
color:990000;
text-decoration:none;
font-weight:none;
Width:100%;
Display: block;
}A:active{
color:990000;
text-decoration:none;
font-weight:none;
background:#c0c0c0;
Width:100%;
Display: block;
}
Can someone show me how to define them and use them as a class slector with a brief explanation please?
Can someone show me how to define them and use them as a class slector with a brief explanation please?
Class selectors is one way to go, but there's actually a better option that saves a little coding and confusion. I'll run through them both and let you decide for yourself.
Class Selectors
Class selectors [w3.org] are defined in the CSS with a dot (.). To tag each of your navigation links with the styles you listed, you need to follow each anchor selector with a dot (.) and the class name, as in...
a.nav:link{
color:990000;
text-decoration:none;
font-weight:none;
width:100%;
display: block;
}
This says to apply these styles to any anchor with a class name "nav", that also happens to be a link. Repeat it with the other pseudoclass styles and you're good to go. The last step is to add the class name into the html. With this approach, you have to tag each anchor with class="nav"...
<a href="#" class="nav">Link Text</a>
This is a fine approach, but CSS is capable of saving you some work if, instead of using a class for each link, you use an ID on the nav container and take advantage of the cascade.
ID the Container
Say your navigation is inside of a div. If you give that div a unique ID, you can then use decendant selectors to target just the anchors inside of that div. This saves a little bit of coding, since you only have to add one id to the div, rather than a class name to each anchor. It also makes things a touch easier to understand as the CSS code reveals the relationship between elements even without the html file open in front of you.
Let's start with some basic markup:
<div id="nav">
<ul>
<li><a href="#">Link Text</a></li>
<li><a href="#">Link Text</a></li>
<li><a href="#">Link Text</a></li>
<li><a href="#">Link Text</a></li>
</ul>
</div>
Notice that the link list is inside of a div, to which I've added the id attribute, "nav." To apply your CSS to this, we're going to use the decendant selector [w3.org], rather than the class selector.
The descendant selector tells the browser to apply styles to any child element of the first element listed. Parent and decendants are seperated by a space. So for the above...
#nav a:link{
color:990000;
text-decoration:none;
font-weight:none;
width:100%;
display: block;
}
In the CSS, the hash mark (#) indicates an ID. Because you will only have one nav bar on the page, using ID is preferable, as it increases the specificity of the selector and ensures that no other CSS will interfere with it's styles. The space seperating the #nav and a:link makes it a decendant selector. It says, "Apply these styles to any anchor inside of the element with an id "nav". Repeat with the other anchor styles.
You can see that we could now freely add more anchor elements to the nav list and they would all get the right styling without having to manually add a class name to each one.
A Few Other Things
A few other things about the code you posted. One, you have your :hover styles after your :active styles, which is fine if that's the effect you want, but bear in mind that whatever pseudoclass comes last in the list will trump all the others. This means that your :hover effect will override your active effect, which not usually what people want to have happen. The generally advised order is :link, .visited, :hover, :active (or LoVe/HAte), which ensures that an active effect persists no matter what. Something to think about.
Also, your CSS repeats rules for each anchor pseudoclass, but the repetition isn't necessary. Since a link is always a link, whether it's been visited, hovered, whatever, you can put all the styles that you want to persist through all states into that first rule block, then only style the properties that will change for each state. In this case, the only anchor state that changes is the :hover state, so listing all four isn't even necessary.
I generally specify the :link and :visited pseudoclasses together, just to be safe, then apply the :hover to both of those. By using comma delimited selectors, you can apply styles to multiple selectors without repeating them. The following code, combined with the ID thing described above, should get you what you want.
#nav a:link, #nav a:visited{
color:#990000;
text-decoration:none;
font-weight:none;
width:100%;
display: block;
}
#nav a:link:hover, #nav:visited:hover{
background:#c0c0c0;
}
This says, "Apply the first block of styles to all links and visited links. Apply the second block of rules (here just a background change) to any hovered links and/or any hovered visited links."
If you have an questions, post back here so we can clear them up.
cEM
Dont want to highjack the post, but I found it really useful reading your response.. it caused me to want to ask a question
If I am using <div id="nav"> could I also use <div class="nav"> do they behave the same or is it best to use #nav if I want to control descendants
I have noticed I cant always control link colors the way I want to decendantly speaking
ZA :-)
normal,bold,bolder,lighter,100-900,inherit
Your way of remember the order LoVe/HAte is a good way to keep it long term - I'll remember that.
Once again, thank you.
If I am using <div id="nav"> could I also use <div class="nav"> do they behave the same or is it best to use #nav if I want to control descendants
I have noticed I cant always control link colors the way I want to decendantly
No, they're different. You use id for divs, and class for paragraphs.
Or at least I think so.
It's easy to check, isn't it? ;)
In any case - there are a lot of words around. I always try not to use same names even for different categories of objects - there are a lot of other opportunities to create a next bug... 8))))
If I am using <div id="nav"> could I also use <div class="nav"> do they behave the same or is it best to use #nav if I want to control descendants
I have noticed I cant always control link colors the way I want to decendantly
No, they're different. You use id for divs, and class for paragraphs.
If I am using <div id="nav"> could I also use <div class="nav">
zack, Farix is right. ID is for using once on a page, class is for multiple occurances, although I suspect you already knew that. As to whether using id="nav" and class="nav" on the same page is possible, the answer is yes, but it's unadvisable.
#nav targets an element with the id attribute, id="nav" and will have no effect on an element with the class attribute, class="nav" (as long as it does not also have the id="nav"). The flip-flop of that is also true.
However, naming conventions are least confusing when the same names are not reused. Even though reusing them won't cause the browser any confusion, remember that the browser is much better at keep track of the rules than the human brain is. You or your successor in managing the stylesheet are likely to get confused by the same name used in two instances (in my case, I'm confused by SIMILAR names, much less identical ones).
This is the same organizational logic behind the common advise not to name class or id selectors after elements, i.e., you wouldn't create a bold, large fonted class and name it H1, as this would be confusing. Same concept.
One thing I do when I need a similar naming element in different places is to use the underscore, as in...
<div id="nav">
<ul>
<li><a href="#" class="nav_link">Link Text</a></li>
<li><a href="#" class="nav_link">Link Text</a></li>
<li><a href="#" class="nav_link">Link Text</a></li>
</ul>
</div>
These names reflect the role the element plays in the structure, as well as revealing to my sometimes feeble mind the relationship between two CSS selectors. of course, using the decendant selector, there isn't any real world need to have the above code, but you get the idea.
Since "nav" is often used only once on a page, the prefered method is to use the ID attribute.
Indeed. The reason to use ID is more than just the "convention" of ID=once, CLASS=multiple, however. In specificity calculation, ID is 10 times more specific than class. This means that nothing short of an inline style can override it's property values. So as long as you know the element will occur only once on the page, I would say always use ID, asi t greatly reduces the likelihood of style interference.
'font-weight' possible values
Spot on, Moby_Dim. Thanks for that.
cEM
I did know about not using multiple id's on a page, this is the nub of the issue for me. I have a page which is long and there are several sets of the same navigation items at different points down the page. I wanted to cut down my CSS and page code by using a class div instead of id div.
I had this:
#pagenav1, #pagenav2, #pagenav3 {
margin: 4px 0 0 0;
height: 35px;
}
#pagenav1 ul, #pagenav2 ul, #pagenav3 ul {
float: right;
text-transform: uppercase;
font-size: 85%;
list-style-type: none;
padding: 0 15px 0 0;
margin: 0;
}
#pagenav1 ul li, #pagenav2 ul li, #pagenav3 ul li {
display: inline;
list-style-type: none;
padding: 0;
margin: 0;
}
#pagenav1 ul li a, #pagenav2 ul li a, #pagenav3 ul li a {
float: left;
color: #fff;
text-decoration: none;
padding: 4px 5px 4px 5px;
margin-left: 2px;
background: #c06;
border: outset 1px;
}
#pagenav1 a:hover, #pagenav2 a:hover, #pagenav3 a:hover {
color: #c06;
height: 10px;
background-image: none;
background: #fff;
border: solid 1px #c06;
}
HTML:
<div id="pagenav1"></div>
<div id="pagenav2"></div>
<div id="pagenav3"></div>
And removed the above repeating id's to replace with
.pagenav {
stuff..
}
.pagenav ul {
stuff..
}
.pagenav ul li {
stuff..
}
.pagenav li a {
stuff..
}
.pagenav li a:hover {
stuff..
}
HTML: <div class="pagenav"></div> 3 times on the page
I think perhaps as you mentioned in your post cEM you loose the accuracy with classes used in this way - basically there is a major conflict somewhere in my code cause the links are not behaving the same..
ZA
