Category: HTML

11 Jun 2016 10:38

Joined:	08/06/2013
Level:	Bronze
Points:	14

Points:	5

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

13 Jun 2016 06:04

Joined:	15/12/2015
Level:	Gold
Points:	1308

Points:	3

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

13 Jun 2016 08:27

Joined:	08/06/2013
Level:	Bronze
Points:	14

Points:	1

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

#766459

13 Jun 2016 23:06

Joined:	29/05/2009
Level:	Gold
Points:	10380

Points:	3

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

15 Jun 2016 01:54

Joined:	13/06/2007
Level:	Gold
Points:	21327

Points:	3

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

16 Jun 2016 00:46

Joined:	08/06/2013
Level:	Bronze
Points:	14

Points:	1

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.

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

About dotnetspider.com

Quick Links

General

Services