1. Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.

External Style Sheet Help

Discussion in 'Programming & Webmastering' started by Asylum, May 24, 2012.

  1. Asylum

    Asylum

    Joined:
    Jul 18, 2008
    Messages:
    2,819 (1.21/day)
    Thanks Received:
    686
    Location:
    South Carolina
    I need to change the background color of a hyper link in an External Style Sheet.

    Does anyone know the code for that or do I have to use in-line on my html page?
     
  2. GSG-9

    GSG-9

    Joined:
    Feb 8, 2005
    Messages:
    1,683 (0.47/day)
    Thanks Received:
    145
    Location:
    Minneapolis, Mn
    We need more info.
    Show me the head of the document in a PM, I need to know if you have included the css already.
    Alternatively if you want to change the color of every hyperlink add this to your head:

    Code:
    <style type="text/css">
    a {color:#123456;}
    </style>
    
     
    Asylum says thanks.
  3. FordGT90Concept

    FordGT90Concept "I go fast!1!11!1!"

    Joined:
    Oct 13, 2008
    Messages:
    13,966 (6.24/day)
    Thanks Received:
    3,803
    Location:
    IA, USA
    Asylum says thanks.
    Crunching for Team TPU
  4. Asylum

    Asylum

    Joined:
    Jul 18, 2008
    Messages:
    2,819 (1.21/day)
    Thanks Received:
    686
    Location:
    South Carolina
    I tried it like this (style sheet)
    body { background-color: #ffffff;
    color: #000099;
    font-family: Arial, Helvetica, sans-serif; }

    h1 { color:#ff0000;
    font-family:"Times New Roman"; }

    #hyperlink {background-color: #cccccc; }

    This is the web page im building for class.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Back to the Future</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="format1.css">
    </head>
    <body>
    <h1>Back to the Future</h1>
    <p>The film tells the story of Marty McFly, a teenager who is accidentally sent back in time from 1985 to 1955.<br> He meets his future-parents in high school and accidentally attracts his future mother's romantic interest.<br> Marty must repair the damage to history by causing his parents-to-be to fall in love,<br> and with the help of scientist Dr. Emmett "Doc" Brown, he must find a way to return to 1985.</p>
    <ul>
    <li>Michael J. Fox</li>
    <li>Christopher Lloyd</li>
    <li>Crispin Glover</li>
    <li>Lea Thompson</li>
    <li>Thomas F. Wilson</li>
    </ul>

    <a href="http://www.imdb.com/title/tt0088763/">Back to the Future, IMDB</a>
    <br>
    <br>
    <a href="mailto:kelvin@holland.net">kelvin@holland.net</a>

    </body>
    </html>
     
  5. GSG-9

    GSG-9

    Joined:
    Feb 8, 2005
    Messages:
    1,683 (0.47/day)
    Thanks Received:
    145
    Location:
    Minneapolis, Mn
    In that case my code will work great to just get it done, FordGT's code is more granular if you want specifics.
     
    Asylum says thanks.
  6. Asylum

    Asylum

    Joined:
    Jul 18, 2008
    Messages:
    2,819 (1.21/day)
    Thanks Received:
    686
    Location:
    South Carolina

    I put the code in but it still doesnt work.

    Could it be my IE8?

    body { background-color: #ffffff;
    color: #000099;
    font-family: Arial, Helvetica, sans-serif; }

    h1 { color:#ff0000;
    font-family:"Times New Roman"; }

    <style type="text/css">
    a {color:#cccccc;}
    </style>
     
  7. GSG-9

    GSG-9

    Joined:
    Feb 8, 2005
    Messages:
    1,683 (0.47/day)
    Thanks Received:
    145
    Location:
    Minneapolis, Mn
    That part MUST go in the head of the document.

    <html>
    <head>
    <title>asdf</title>
    <style type="text/css">
    a {color:#cccccc;}
    </style>

    </head>
    <body>
    Content Here
    </body>
    </html>
     
    Last edited: May 24, 2012
    Asylum says thanks.
  8. Asylum

    Asylum

    Joined:
    Jul 18, 2008
    Messages:
    2,819 (1.21/day)
    Thanks Received:
    686
    Location:
    South Carolina
    Oh..so thats in-line then on my html page/
     
  9. GSG-9

    GSG-9

    Joined:
    Feb 8, 2005
    Messages:
    1,683 (0.47/day)
    Thanks Received:
    145
    Location:
    Minneapolis, Mn
    It is not inline since it is in the head of the document. but yes it is in the html. If you want to include a new document it is simply <link rel="stylesheet" type="text/css" href="path/here/nameofdoc.css" />
    If that did not work in the past, you just have the path wrong to the css file.
     
  10. Asylum

    Asylum

    Joined:
    Jul 18, 2008
    Messages:
    2,819 (1.21/day)
    Thanks Received:
    686
    Location:
    South Carolina
    It works in the html doc.

    So i would have to make a new style sheet and link it to my html page just to get the link background color to work?
     
  11. GSG-9

    GSG-9

    Joined:
    Feb 8, 2005
    Messages:
    1,683 (0.47/day)
    Thanks Received:
    145
    Location:
    Minneapolis, Mn
    Yup, if you or your instructor does not want it in document.
     
  12. Asylum

    Asylum

    Joined:
    Jul 18, 2008
    Messages:
    2,819 (1.21/day)
    Thanks Received:
    686
    Location:
    South Carolina
    Well aint that some crap
     
  13. OnePostWonder

    Joined:
    Dec 27, 2008
    Messages:
    582 (0.27/day)
    Thanks Received:
    107
    Something that really helps me when learning web-coding is to take a well built website such as this and view the page source.
     
    Asylum says thanks.
  14. GSG-9

    GSG-9

    Joined:
    Feb 8, 2005
    Messages:
    1,683 (0.47/day)
    Thanks Received:
    145
    Location:
    Minneapolis, Mn
    Take it apart in Chrome DevTools, or if you want to keep track of changes use an extension like CSS Inject. OnePostWonder is right, it helps build an understanding of whats going on.
     
    Asylum says thanks.
  15. GSG-9

    GSG-9

    Joined:
    Feb 8, 2005
    Messages:
    1,683 (0.47/day)
    Thanks Received:
    145
    Location:
    Minneapolis, Mn
    This is a theoretical directory, you can do it where ever you want.
    Suppose
    Html file:
    C:\Website\index.html
    CSS file:
    C:\Website\css\css.css
    then in the head you would want:
    <link rel="stylesheet" type="text/css" href="/css/css.css" />
     
  16. FordGT90Concept

    FordGT90Concept "I go fast!1!11!1!"

    Joined:
    Oct 13, 2008
    Messages:
    13,966 (6.24/day)
    Thanks Received:
    3,803
    Location:
    IA, USA
    ...replying late but make sure your link rel="stylesheet" has the type="text/css". Browsers may behave badly if they don't know what the MIME type is.


    If the CSS content is used on more than one page, it should always be linked. Browsers cache CSS files so it saves on bandwidth/loading times.
     
    Crunching for Team TPU
  17. Asylum

    Asylum

    Joined:
    Jul 18, 2008
    Messages:
    2,819 (1.21/day)
    Thanks Received:
    686
    Location:
    South Carolina
    Will this code work in my external style sheet/

    a:link {color:#cccccc;}

    I have to make 2 external style sheets with different colors so GSG-9 tip wont work for this in the html doc.
     
  18. FordGT90Concept

    FordGT90Concept "I go fast!1!11!1!"

    Joined:
    Oct 13, 2008
    Messages:
    13,966 (6.24/day)
    Thanks Received:
    3,803
    Location:
    IA, USA
    Yeah, that should work. It would make it appear a light gray.
     
    Crunching for Team TPU
  19. GSG-9

    GSG-9

    Joined:
    Feb 8, 2005
    Messages:
    1,683 (0.47/day)
    Thanks Received:
    145
    Location:
    Minneapolis, Mn
    Yeah, change the hex number as needed, you can find the color you want in paint or any program.

    I think you mean you need two different rules

    so you could give one of your anchor tags a class of anchor1.
    Html link:
    <A HREF="linkhere.html" class="anchor1">Link text</A>

    CSS:
    a.anchor1 {color:123456;}
    a {color:234567;}

    Does that help?
     
  20. FordGT90Concept

    FordGT90Concept "I go fast!1!11!1!"

    Joined:
    Oct 13, 2008
    Messages:
    13,966 (6.24/day)
    Thanks Received:
    3,803
    Location:
    IA, USA
    Classes are fantastic.

    a = HTML tag = <a></a>
    .anchor1 = class = <a class="anchor1"></a>
    #anchor1 = id = <a id="anchor1"></a>

    ID applies to only one element. Class applies to any with the same class. HTML tag applies to all with that tag (basically sets default). ID overrides class. Class overrides HTML tag.
     
    Crunching for Team TPU
  21. Asylum

    Asylum

    Joined:
    Jul 18, 2008
    Messages:
    2,819 (1.21/day)
    Thanks Received:
    686
    Location:
    South Carolina
    This is how I did it for the other website I created.

    Put this code in your external style sheet.

    #footer { background-color: #ccaa66;
    color: #000000;
    font-size: .60em;
    font-style: italic;
    text-align: center; }

    Then link it on your html page in a <div></div> tag.

    <div id="footer"> footer content here </div>
     

Currently Active Users Viewing This Thread: 1 (0 members and 1 guest)

Share This Page