You must Sign In to post a response.
  • Category: HTML

    How to apply different stylesheets styles to same kind of element each

    I have one html page with two stylesheets(StyleSheet1.css and StyleSheet2.css)

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <link href="StyleSheet1.css" rel="stylesheet" />
    <link href="StyleSheet2.css" rel="stylesheet" />
    </head>
    <body>

    <a href="#" >First Link</a>
    <a href="#" >Second Link</a>

    </body>
    </html>

    Stylesheet1.css

    a { color:green; }

    Stylesheet2.css

    a { color:red; }

    How can i apply green color to first link and red color to second link with out using selectors and jquery.
  • #766452
    Hi,
    Place each of the element inside different different <-div> and use respective <-div> id in CSS as follows:

    Stylesheet1.css

    #css1 a { color:green; }

    Stylesheet2.css

    #css2 a { color:red; }

    <-div id="css1">
    <-a href="#">First Link</a>
    <-/div>
    <-div id="css2">
    <-a href="#">Second Link</a>
    <-/div>

  • #766454
    Thank you for your response. Is there any other way without using div or other elements?

  • #766459
    Hi
    you can try this code



    <head runat="server">
    <title></title>
    <style>
    #css1 a { color:green; }
    #css2 a { color:red; }
    </style>
    </head>
    <body>
    <form id="form1" runat="server">

    <table class="css1">
    <tr>
    <td></td>
    </tr>
    </table>
    <table class="css2">
    <tr>
    <td></td>
    </tr>
    </table>

    Name : Dotnet Developer-2015
    Email Id :kumaraspcode2009@gmail.com

    'Not by might nor by power, but by my Spirit,' says the LORD Almighty.

  • #766475
    Just give each one a different id

    #firsthtml .classname {
    }
    #sechtml .classname {
    }

    Be sure to use the space, as #firsthtml.classname is something totally different.

    <div class="classname" id="firsthtml"></div>
    <div class="classname" id="sechtml"></div>

    You could also use two different class names

    <div class="classname secondclassname"></div>

    hope it helps

    Thanks
    Koolprasd2003
    Editor, DotNetSpider MVM
    Microsoft MVP 2014 [ASP.NET/IIS]

  • #766490
    Hi,

    I don't want to change anything in the StyleSheet1.css and StyleSheet2.css. The changes should be in Html page only.

    Please provide solution.

    Thank you.


Sign In to post your comments