Just a small question about understanding

[cranebill]

I keep seeing this sort of thinga:link {text-decoration:none;color:#319ac2;font-weight:bold;font-size:9pt}a:visited {text-decoration: none;color:#133643;font-weight:bold;}a:active {text-decoration: underline;color:#369cc3;font-weight:bold;}a:hover {text-decoration: underline; color:#303030;font-weight:bold;}Then I see this .class1 A:link {text-decoration: none}.class1 A:visited {text-decoration: none}.class1 A:active {text-decoration: none}.class1 A:hover {text-decoration: underline; color: red;}.class2 A:link {text-decoration: underline overline}.class2 A:visited {text-decoration: underline overline}.class2 A:active {text-decoration: underline overline}.class2 A:hover {text-decoration: underline; color: green;}How does css understand that this is for Links (I have seen it on lots of things, div etc etc, where they have not stipulated a Html tag to define in a css page

[SillyBilly]

I keep seeing this sort of thinga:link {text-decoration:none;color:#319ac2;font-weight:bold;font-size:9pt}a:visited {text-decoration: none;color:#133643;font-weight:bold;}a:active {text-decoration: underline;color:#369cc3;font-weight:bold;}a:hover {text-decoration: underline; color:#303030;font-weight:bold;}Then I see this .class1 A:link {text-decoration: none}.class1 A:visited {text-decoration: none}.class1 A:active {text-decoration: none}.class1 A:hover {text-decoration: underline; color: red;}.class2 A:link {text-decoration: underline overline}.class2 A:visited {text-decoration: underline overline}.class2 A:active {text-decoration: underline overline}.class2 A:hover {text-decoration: underline; color: green;}How does css understand that this is for Links (I have seen it on lots of things, div etc etc, where they have not stipulated a Html tag to define in a css page

I'm not sure whether I understand your question, but I'll try an answer. If the code is placed in the CSS and there is a link from a page to the CSS file such as

<link rel="stylesheet" type="text/css" href="mystyle.css"/>

the page uses the code in the CSS for the links. If there is no code for the links, the Browser uses its own decoration as the default.The code can be placed in each page rather than using a CSS, but that is coding before the advent of CSS.

[jlhaslip]

This first bit of CSS tells the Browser that all Anchor tags on the page should be handled according to these rules.

a:link {text-decoration:none;color:#319ac2;font-weight:bold;font-size:9pt}a:visited {text-decoration: none;color:#133643;font-weight:bold;}a:active {text-decoration: underline;color:#369cc3;font-weight:bold;}a:hover {text-decoration: underline; color:#303030;font-weight:bold;}

This next bit of CSS tells the Browser that the Anchor tags that are of the stated 'class' should be handled with the following rule sets. One set of rules for the first class (class1) and another set of rules for the second class (class2)

.class1 A:link {text-decoration: none}.class1 A:visited {text-decoration: none}.class1 A:active {text-decoration: none}.class1 A:hover {text-decoration: underline; color: red;}.class2 A:link {text-decoration: underline overline}.class2 A:visited {text-decoration: underline overline}.class2 A:active {text-decoration: underline overline}.class2 A:hover {text-decoration: underline; color: green;}

How does css understand that this is for Links (I have seen it on lots of things, div etc etc, where they have not stipulated a Html tag to define in a css page

The Browser knows that the rules apply to Anchors tags (links) because the <a> identifies them as links.Hope this helps.Incidently, the rule sets are in the wrong order in your example. The :hover rule should be prior to the :active rule.LoVe HAte

[jeffman]

I'm also confused about the question and exactly what you're confused about. (And I'm a little confused about jl's response, too.)One answer might be this. An unprefixed "dot" identifier (like ".class1") can be applied to any element. It's generic. So when an <a> is the descendant of ANY element with classname of "class1", the a:hover will be, among other things, "red". The tag arrangement might look like any of these, because, however deeply nested, the <a> is a descendant of something with class "class1":<span class="class1"><a href="my.html">Hello</a></span><li class="class1"><a href="my.html">Hello</a></li><div class="class1"><b><i><a href="my.html">Hello</i></b></a></div>Because of inheritance (still going from your example) a:hover in these instances will have a bold font weight, because that was how the type was defined, and nothing in the species definition overrides the font weight.