Is it possible to define hyperlink (and consequently other things too i guess) styles in the same document?
I have a document whereby <h1> has a dark grey background and white-ish text, and <p> has the opposite. I'd quite like my hyperlinks in my headings to be one colour so they show up nicely on the background, but my hyperlinks in <p> to be another so that they show up against the lighter background. I guess I was thinking along the lines of doing a .a definition or something for differnet div's, but (surprise surprise) I'm really not too sure what I'm doing!
Many thanks - am now a css convert!Make class definitions.
<STYLE>
a.linkDark:link {your_style}
a.linkLight:link {your_style}
</STYLE>
<!-- be sure to add the CLASS descriptor to your tags -->
<a href=http://www.webdeveloper.com/forum/archive/index.php/"...." CLASS="linkLight/linkDark">... </a>ah great - that'll work nicely.
Is there a way of doing it automatically in the different sections? i can set up "a" for <p>, but the other links will be in the "subsection" div - can i do something like "a.subsection : definition" or is that asking too much?
But thanks for that anywayYou could do something like this:
<style type="text/css">
#section1 A {color: blue}
#section2 A {color: green}
</style>
<div id="section1">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"...">This will be blue</a>
</div>
<div id="section2">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"...">This will be green</a>
</div>I'm too sure exactly what you are asking with the second question.
/* H1 elements with class matching pastoral */
H1.pastoral { color: green; }
/* Anchor with class "external" colour blue in the :visited state */
A.external:visited { color: blue; }
/* H1 element coloured red only when contained within a HTML H1 division */
div h1 {color: red;}
One of the solutions would be to combine the methods, although there are better methods which you can apply.
There are probably several ways to achieve the effect, e.g. Gilbert has chosen to use the identifier method for a division block.sorry for the confusion: what i mean is, the page works like this (sort of)...
<h1>A headline with a <a href=http://www.webdeveloper.com/forum/archive/index.php/"">link</a>
</h1>
<div id="subsection">
<p>A subsection with <a href=http://www.webdeveloper.com/forum/archive/index.php/"">another link</a>
</p>
</div>
So i'd like to design the CSS so that the above code will allow the two links to be different colours. I'd prefer not to have to put in anything like <a href=http://www.webdeveloper.com/forum/archive/index.php/"" class="dark"> since that would require a bit of thought, and i try to avoid that! Also a lot of the pages will be php generated, so the more automation i can include the better.
It looks as if gil is on the right track - i take it that if i define a style for just "a" then that will work in my headline, and then define a "#subsection a" then that will work in my subsection? that looks grand!<style type="text/css">
H1 A {...}
#subsection P A {...}
</style>
I have a document whereby <h1> has a dark grey background and white-ish text, and <p> has the opposite. I'd quite like my hyperlinks in my headings to be one colour so they show up nicely on the background, but my hyperlinks in <p> to be another so that they show up against the lighter background. I guess I was thinking along the lines of doing a .a definition or something for differnet div's, but (surprise surprise) I'm really not too sure what I'm doing!
Many thanks - am now a css convert!Make class definitions.
<STYLE>
a.linkDark:link {your_style}
a.linkLight:link {your_style}
</STYLE>
<!-- be sure to add the CLASS descriptor to your tags -->
<a href=http://www.webdeveloper.com/forum/archive/index.php/"...." CLASS="linkLight/linkDark">... </a>ah great - that'll work nicely.
Is there a way of doing it automatically in the different sections? i can set up "a" for <p>, but the other links will be in the "subsection" div - can i do something like "a.subsection : definition" or is that asking too much?
But thanks for that anywayYou could do something like this:
<style type="text/css">
#section1 A {color: blue}
#section2 A {color: green}
</style>
<div id="section1">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"...">This will be blue</a>
</div>
<div id="section2">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"...">This will be green</a>
</div>I'm too sure exactly what you are asking with the second question.
/* H1 elements with class matching pastoral */
H1.pastoral { color: green; }
/* Anchor with class "external" colour blue in the :visited state */
A.external:visited { color: blue; }
/* H1 element coloured red only when contained within a HTML H1 division */
div h1 {color: red;}
One of the solutions would be to combine the methods, although there are better methods which you can apply.
There are probably several ways to achieve the effect, e.g. Gilbert has chosen to use the identifier method for a division block.sorry for the confusion: what i mean is, the page works like this (sort of)...
<h1>A headline with a <a href=http://www.webdeveloper.com/forum/archive/index.php/"">link</a>
</h1>
<div id="subsection">
<p>A subsection with <a href=http://www.webdeveloper.com/forum/archive/index.php/"">another link</a>
</p>
</div>
So i'd like to design the CSS so that the above code will allow the two links to be different colours. I'd prefer not to have to put in anything like <a href=http://www.webdeveloper.com/forum/archive/index.php/"" class="dark"> since that would require a bit of thought, and i try to avoid that! Also a lot of the pages will be php generated, so the more automation i can include the better.
It looks as if gil is on the right track - i take it that if i define a style for just "a" then that will work in my headline, and then define a "#subsection a" then that will work in my subsection? that looks grand!<style type="text/css">
H1 A {...}
#subsection P A {...}
</style>