Advanced Search

Results 1 to 7 of 7

Thread: Different formats for <a> tag

  1. #1
    Join Date
    Dec 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Different formats for <a> tag

    Hi
    I am using dreamweaver 2004 for designing websites. I have formated the <a> tag within CSS. My problem is that I would like to have different font colours and background colours of the <a> tag over the website. I don't know how to do. Can anybody please help? Thank you.

  2. #2
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    You can use CSS class or id identifiers to change colors. An id would be used if that particular <a> tag is unique (i.e. you will not be using that color scheme elsewhere on the site). Class identifiers are used for repeating elements.

    Let's test this.

    First, in your HTML, add the following:

    HTML Code:
    <a href="#">Today's Headlines</a>
    
    <a href="#" id="good">Good News</a>
    <a href="#" class="goodnews">Steve Wins $1,000,000 Lottery</a>
    <a href="#" class="goodnews">New School Opens in Timbuktu</a>
    
    <a href="#" id="bad">Bad News</a>
    
    <a href="#" id="badnews">Fire Breaks Out in Enchanted Forest</a>
    <a href="#" id="badnews">Child Loses his Bike, Mother Says</a>
    Notice the various class= and id= declerations.

    Now to the CSS, let's add the following

    Code:
    a {
       display:block;
       padding:5px 10px;
    }
    a#good {
       background:#50E923;
       font-weight:bold;
       color:white;
    }
    a#bad {
       background:#ee0000;
       font-weight:bold;
       color:white;
    }
    a.goodnews {
       color:#50E923;
    }
    a.badnews {
       color:#ee0000;
    }
    You should see the relationship between the various CSS declerations and the anchors we used.

    a is the default setting for all anchors. Unless these specific settings are redecleared in class/id style tags, they will still apply.
    a#good refers to id="good".
    a.goodnews refers to class="goodnews".

    Hopefully that's clear. Let me know if there are any questions.

  3. #3
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Quote Originally Posted by Medyman View Post
    An id would be used if that particular <a> tag is unique (i.e. you will not be using that color scheme elsewhere on the site).
    thats wrong... its unique to the page, not the site

    you can have multiple pages that have an element with the same ID, however you cannot have multiple elements with the same ID on the same page.


    allowed--

    index.html
    Code:
    <a href="/path" id="dd">Dynamic Drive</a>
    contact.html
    Code:
    <a href="mailto:spam@alsfjalflaj.com" id="dd">Contact Us</a>

    not-allowed --

    index.html
    Code:
    <a href="/path" id="dd">Dynamic Drive</a>
    <br>
    <a href="mailto:spam@alsfjalflaj.com" id="dd">Contact Us</a>
    for the second example you would need to use a class attribute

  4. #4
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Ehh, semantics. In all practicality, what I suggested is correct. If someone is just learning CSS, the likelihood, that they're using multiple stylesheets across a site. To be technical though, yes you're right.

    In most instances, however, if you're repeating a particular style across several pages, and using one stylesheet, standards say to use class identifiers. Of course, there are exceptions where specificity demands, but let's not try to confuse people who are just starting out with CSS.

  5. #5
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    that is incorrect... and telling people the right way to do it in the first place is better than having them learn incorrectly.

    Quote Originally Posted by http://www.w3.org/TR/REC-html40/struct/global.html
    id = name [CS]
    This attribute assigns a name to an element. This name must be unique in a document.
    aka that style is unique to that page

    Quote Originally Posted by 6 lines down
    The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances.

  6. #6
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    boogyman, don't argue for no reason. Reread what I stated before. You're getting into a semantic argument. We both mean the same thing. I think the OP understands. If they don't they can ask for a clarification.

  7. #7
    Join Date
    Feb 2007
    Location
    🌎
    Posts
    528
    Thanks
    10
    Thanked 10 Times in 10 Posts
    Blog Entries
    2

    Default

    You could use simply colored text and a JS cursor changer onMouseOver.
    ....(o_ Penguins
    .---/(o_- techno_racing
    +(---//\-' in
    .+(_)--(_)' The McMurdo 500

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •