Hi there,
Originally Posted by
certificates
I just can't grasp this
No problem. Maybe if we take a step back and look at some of the underlying principles, that will help.
Imagine this:
<p>Some interesting content</p>
If you want to change the style of this, you would do p{color:red};
This will target every p element in the whole document.
Now suppose we have three <p> elements and you just want to target the middle one. To do that you give it a class:
HTML Code:
<p>Some interesting content</p>
<p class="special">Some more interesting content</p>
<p>Some even more interesting content</p>
p{color:red;} will change them all red
Then you would do .special{color:yellow;}
That will get the one in the middle with the class applied to it.
Now imagine this:
HTML Code:
<p>Some interesting content</p>
<p class="special">Some more interesting content</p>
<p>Some even more interesting content</p>
<div class="special">Nothing special here</div>
If you use .special{color:yellow;} you will target the text in both the <div> and the <p>
If that's not what you want to do, then you can get even more specific:
Code CSS:
p{color:red;}
p.special{color:yellow;}
div.special{color:green;} Now imagine you have this:
HTML Code:
<p><a href="#">A link</a> Some interesting content</p>
<p class="special">Some more interesting content</p>
<p>Some even more interesting content</p>
<div class="special">Nothing special here</div>
What colour do you think the link will be?
That's right, blue. It will inherit the default link colour, as there is currently no rule saying otherwise.
If we want to style it, we could of course go: a{color:gray} and that would hit all a tags in the document. Job done!
Now imagine this:
HTML Code:
<p><a href="#">A link</a> Some interesting content</p>
<p class="special">Some more interesting content</p>
<p>Some even more interesting content</p>
<div class="special">Nothing special here</div>
<a href="#">Another link</a>
If we want to target only the link in the p tag, we could do p a{color:yellow};
Last example:
HTML Code:
<p><a href="#">A link</a>Some interesting content</p>
<p class="special"><a href="#">Link three</a>Some more interesting content</p>
<p>Some even more interesting content</p>
<div class="special">Nothing special here</div>
<a href="#">Another link</a>
How can we target only the link in the <p> tag with the class of "special"?
p.special a{color: cyan}
Hopefully you get the idea of drilling down to become more specific.
Here's the whole example:
HTML Code:
<!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>Unbenanntes Dokument</title>
<style>
p{color:red;}
p.special{color:yellow;}
div.special{color:green;}
a{color:gray}
p.special a{color:cyan}
</style>
</head>
<body>
<p><a href="#">A link</a> Some interesting content</p>
<p class="special"><a href="#">Link three</a> Some more interesting content</p>
<p>Some even more interesting content</p>
<div class="special">Nothing special here</div>
<a href="#">Another link</a>
</body>
</html>
So, to answer your question, this is a commented version of your style sheet.
Code CSS:
/* Targets all h1 tags */
h1{color:#ffffff; font-size: 19px; font-weight:bold;font-style:italic; text-align:center;}
/* Targets all h2 tags */
h2 {color:#cd0000; font-size: 15px; text-decoration:underline;font-weight:bold;}
/* Targets all p tags with a class of two */
p.two {color:#cd0000; font-size: 15px;font-weight:bold;}
/* Targets all unvisited anchor tags (as above) */
a:link {color:#cd0000;}
/* Targets all p tags with a class of three */
p.three {color:#000080; text-decoration:none;}
/* Targets all unvisited anchor tags (overwrites the previous rule) */
a:link {color:#000080;}
/* Targets all p tags with a class of four*/
p.four {color:#000000; font-size: 15px;font-weight:bold;}
/* Targets all unvisited anchor tags with a class of four */
a.four:link{color:#000000;}
If all of this doesn't help you solve your problem, please just post a link to the page in question.
Tell me what you would like and how it is not working.
I'm sure we'll get to the bottom of this soon!
Reply With Quote
Bookmarks