1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

CASCADING Style sheets?

Discussion in 'Software Development' started by Corrosive, Mar 4, 2003.

Thread Status:
Not open for further replies.
Advertisement
  1. Corrosive

    Corrosive Thread Starter

    Joined:
    Jan 9, 2003
    Messages:
    1,058
    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?
     
  2. Shadow2531

    Shadow2531

    Joined:
    Apr 30, 2001
    Messages:
    2,636
    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
     
  3. Rockn

    Rockn

    Joined:
    Jul 29, 2001
    Messages:
    21,334
    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.
     
  4. Shadow2531

    Shadow2531

    Joined:
    Apr 30, 2001
    Messages:
    2,636
    Thanks Rockn. I forgot all about the obvious.

    That's probably the best definition.
     
  5. Corrosive

    Corrosive Thread Starter

    Joined:
    Jan 9, 2003
    Messages:
    1,058
    Thanks guys. I've wondered about it for a while but have only just remembered to ask about it LOL :D
     
  6. deuce868

    deuce868

    Joined:
    Nov 2, 2000
    Messages:
    637
    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:
    <div class="red"Testing <span class="large">this</spanstuff </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.
     
  7. Shadow2531

    Shadow2531

    Joined:
    Apr 30, 2001
    Messages:
    2,636
    thanks deuce868
     
  8. juryu

    juryu

    Joined:
    Feb 7, 2003
    Messages:
    18
    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

    &lt;p class=c1&gt;
    &lt;a href="blah"&gt;blah&lt;/a&gt;
    &lt;/p&gt;

    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

    &lt;a class=c1 href="blah"&gt;

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

    deuce868

    Joined:
    Nov 2, 2000
    Messages:
    637
    you can redefine the default style for links by just redifining the A property.


    PHP:

    a
    :link
    {
      
    color:red;
    }
    a:visited
    {
      
    colorblue;
    }
    a:hover
    {
      
    coloryellow;
    }
    a:active
    {
      
    colorred;
    }


     
  10. Shadow2531

    Shadow2531

    Joined:
    Apr 30, 2001
    Messages:
    2,636
    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.
     
  11. Shadow2531

    Shadow2531

    Joined:
    Apr 30, 2001
    Messages:
    2,636
    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.
     
  12. Shadow2531

    Shadow2531

    Joined:
    Apr 30, 2001
    Messages:
    2,636
    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. :cool:
     
  13. deuce868

    deuce868

    Joined:
    Nov 2, 2000
    Messages:
    637
    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?
     
  14. brendandonhu

    brendandonhu

    Joined:
    Jul 8, 2002
    Messages:
    14,681
    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).
     
  15. Shadow2531

    Shadow2531

    Joined:
    Apr 30, 2001
    Messages:
    2,636
    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)
     
  16. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/122086

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice