Search code examples
cssstylesheet

I tried several times to get two styles for same activity on the same page but it doesnt work

I need "orange" color to my hyperlinks only one one specific page. there is already a .css file designed for other pages. Now how can i tell html to design links in a different way only for one page. No matter whatever I experiment, it picks up style from the included .css file. Please tell me how to write a different links style only for one specific page of a website. Thanks...

These are the three methods I tried

a:link { color: orange;}
a:visited {color: orange;}
a:hover {color: orange;}
a:active {color: orange;}

div.nav a:link, div.nav a:visited, div.nav a:hover, div.nav a:focus, div.nav a:active 
  { 
  color: orange; 
  }

a.nav1:link,a.nav1:visited,a.nav1:active
  { 
  color: orange; 
  }

EDIT: Its not working. Let me explain it again. Assuming i have three files with dark background color, header.php, one.php and two.php. CSS styles are set for all these three files.... and link, visited, hover, focus and active all colors are white.

Now I have a new file three.php with a white background color.. so the link gets hidden. Actually it is there but since the link style color is white and page background is also white, it is not visible. I want to make this orange.

When I did that, in the css file, all previous three files links color changed from white to orange. all link color in the header file changed from white to orange.

How can i keep orange color link (ink, visited, hover, focus and active everything) only in the new fourth page without changing hyperlinks color of the other files?

Thanks

Solution

  • You can add a wrapper to this specific page and named it for example <div id="specificPage"></div> This wrapper need to wrap all content you create on this page.

    After that just add #specificPage to your CSS decalartions:

    #specificPage a:link { color: orange;}
#specificPage a:visited {color: orange;}
#specificPage a:hover {color: orange;}
#specificPage a:active {color: orange;}

#specificPage div.nav a:link,#specificPage div.nav a:visited, #specificPage div.nav a:hover, #specificPage div.nav a:focus, #specificPage div.nav a:active 
{ 
    color: orange; 
}

#specificPage a.nav1:link, #specificPage a.nav1:visited, #specificPage a.nav1:active
{ 
    color: orange; 
}

    You can also declare a specific class. For example class orange for your a tag. In your CSS it would be something like this:

    .orange {
    color:orange;
}

    All you need to do now is to add this class to your hyperlinks in your HTML structure.

    Example: <a href="#" class="orange">LINK</a>