Re: classes

  •  03-10-2008, 10:23 AM

    Re: classes

    Hi,

    I think that I understand the problem, CSS and HTML are hierarchical structures with the bottom most element in the hierarchy or cascade having the most importance.  For instance in a CSS file if you set a class to have a red background and then farther down in the document you set again it with a blue background, your class is going to have a blue background.  In an HTML file the styles of a span inside an p tag over ride the styles of the p tag.

    In your first example you have the span outside the a tag, so because the a tag is farther down the hierarchy of the HTML and it's styles over ride those of the span.  The second example works because the span is inside the a tag so the styles of the span over ride the styles of the a tag.

    However there's an even easier solution, simply put the class on the a tag itself.  And if you always want the resource links to be bold and larger you don't need an H3 tag you can just put those styles into the class.

    so your class goes from:

    .resource {
    color:#FF6500;
    background-color:ffffff;
    text-decoration:none;
    }

    to:

    a.resource {
    color:#FF6500 !important;
    background-color:#ffffff !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-decoration:none !important;
    }

    Your HTML goes from:

    <h3>
    <span class="resource">
    <a href="http://www.adaptiveenvironments.org/neada/documents/tam1wadd.html#pregnancy" title="Pregnancy reference" target="_blank">
    Technical Assistance
    </a>
    </span>
    </h3>

    to:

    <a href="http://www.adaptiveenvironments.org/neada/documents/tam1wadd.html#pregnancy" title="Pregnancy reference" target="_blank" class="resource">
    Technical Assistance
    </a>

    So as you can see that should drastically simplify your HTML since you no longer need the span or h3 tags in there.  Let the CSS do the styling work for you.  Two things to note, first make sure your class is in your CSS as "a.resource" not just ".resource" so that you're specifically targeting a tags with the resource class.  The second is I've added "!important" after the CSS class attributes, this makes certain that Firefox and IE7 absolutely positively follow these attributes.  I hope this has been helpful.
     

View Complete Thread

how to build effective online courses and simulations

learn how our tool myudutu works

log-in to free version of myudutu now

Powered by Community Server, by Telligent Systems