[Corrosive]

This is more of an interestign question than a problem, so I apologise if I've posted in the wrong place.

Anyway, CSS. Cascading Style Sheets, right? I understand why the "Style Sheet" part came about, but why on earth did they put the "cascading" part? What is "cascading" in these sheets?

[Shadow2531]

Best way to understand why they are cascading is to look up the defintion for cascading

"A succession of stages, processes, operations, or units."

and then the definition for succession

"The act or process of following in order or sequence."


Then you can use the definitions to elaborate, but just don't take the definitions too directly.

a direct interpretation could be.

say you have to define your link atrributes for the whole document. you define

a:link
a:visited
a:active
a:hover.

Then if you want to define another set of link attributes to be used for just certain links, you could define the next set as

a.c2:link
a.c2:visited
a.c2:active
a.c3:hover

then another set

a.c3
a.c4 etc.

see the sequence?

That's too literal of a interpretation though.

Another way you could interpret it would be

you have different stages (attributes) that are set and they are interpreted by the browser in sequence from the top of the style sheet to the bottom.

Or you could take it as just going down a line.

just cascade your browser windows to see what i mean by that..

that's my thoughts on that. I'm sure others will have a different interpretation.

I was unable to find an exact definition of Cascading when used with style sheets.

hope that helps

[Rockn]

I was always under the impression that cascading referred to the way the style would be consistent throughout all of the pages that use a specific style sheet and the format cascades from the first to the last page.

[Shadow2531]

Thanks Rockn. I forgot all about the obvious.

That's probably the best definition.

[Corrosive]

Thanks guys. I've wondered about it for a while but have only just remembered to ask about it LOL

[deuce868]

actually, what I have read is this:

if you have a styles like this:
.red
{
color: red;
}

and

.large
{
font-size: x-large;
}

and used them like this:

PHP Code:

<div class="red"> Testing <span class="large">this</span> stuff </div> 


The red color tag would cascade to the inner span style so the text "this" would be both large and red.

Unless redefined, a particular elemet of a style will continue to cascade into as many properties as you use.

[Shadow2531]

thanks deuce868

[juryu]

By the way, if I define different links like Shadow2531 said, how do I make the links appear in the way I want?
For example I thought that

<p class=c1>
<a href="blah">blah</a>
</p>

This link should have the attributes of a.c1, but it doesn't, it has the attributes of normal a. The only way I can get the different attributes is if I write

<a class=c1 href="blah">

But it is soooo boring to do this on every link...

[deuce868]

you can redefine the default style for links by just redifining the A property.

PHP Code:


a:link
{
  color:red;
}
a:visited
{
  color: blue;
}
a:hover
{
  color: yellow;
}
a:active
{
  color: red;
} 


[Shadow2531]

juryu

If you are going use a different set of link attributes, besides the default, then your second method of calling the class inside the a tag is the correct way to do it. It is boring, but the usual way to do it.

I think there is another way to do it, but not sure. I think you might be able to put a certain amount of code between div tags and set a different link default class for that code.

I will see if I can find how to do it.

[Shadow2531]

I figured it out.

Define an anchor id and set the color attribute.

Call the id using a div tag.

Then every link inside the open and close div tags, will be that color.

That should be what you want. However it's an absolute color. It doesn't change color depending on if you clicked on the link before.

I am not sure how to define the link, visited, active, and hover attributes with an anchor id; if you even can.

I setup a page in the next reply as an example. View source to see.

Ok I take that back, you can use the attributes. At least one at a time. I have to figure out how to do them all.

[Shadow2531]

not sure if this is the PROPER method of accomplishing the task, but here is an example of how you can accomplish it with

a:link
a:visited
a:hover
a:active

for it to work right, you need to set them in that order.

(view source to see how it's done.)


All the test links on that page point to www.google.com so if you have google in your history, clear your history so you can see the 3 different colors.

I set the link to white, the visited link to blue and the hover to purple. I didn't set the active in the example.


I may start using this method myself.

[deuce868]

they have to be in order of lvha in order for them not to interfere with each other...is that what was messing with your active?

[brendandonhu]

I know you guys are on to something else beyond my knowledge, but according to W3C, it got its name because multiple styles CASCADE into one style (the .css file).

[Shadow2531]

thanks deuce868 for the order info. When I was trying to figure out how do accomplish that, I put the active before the hover, so yep, that inproper order was messing up the active.


thanks brendandonhu for another defintion! Could you throw up the link to the w3c page that has the definition, if you got it. (just for good measure)