how to omit style sheet to apply style to other web page

Question

i 'm making one message repeater like new message notification dialogue from this reference http://codepen.io/petebot/full/CpKzI here i just found one new style sheet that gives nice look to message dialogue. but with little restriction i only want to this control style with this style sheet name :

<link id="Link2" href="../css/foundation.min.css" rel="stylesheet" type="text/css" target="_self"/>

so. i'm making this user control with web user cotrol like this :

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="notification.ascx.cs" Inherits="Staff_notification" %>
<link id="Link1" href="../css/notification.css" rel="stylesheet" type="text/css"/>
<link id="Link2" href="../css/foundation.min.css" rel="stylesheet" type="text/css" target="_self"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<div class="contain"><a href="#" class="notificationicon on" style="position:relative;text-decoration:none;">Messages&nbsp;<span class="noti_bubble1" runat="server" id="message_alert"><asp:Label ID="lbl_count_messages" runat="server"></asp:Label></span></a>
    <ul id="notificationMenu" class="notifications">
      <li class="titlebar">
        <span class="title">Messages</span>
        <span class="settings"><i class="icon-cog"></i>
        </span>
      </li>
      <div class="notifbox">
      <ul>
       <asp:Repeater ID="Repeater_Messages" runat="server">
       <ItemTemplate>
        <li class=" notif">
          <a href="Ticket.aspx?ticketid='<%#Eval("Ref_no")%>'&flag=0">
            <div class="imageblock">
             <asp:Image ID="userphoto" runat="server" CssClass="notifimage" ImageUrl = "../DisplayImage.ashx?userId='<%#Eval('UserId')%>"/>
            </div> 
            <div class="messageblock">
              <div class="message"><strong><%#Eval("Name")%></strong>:<br/><%#Eval("Message")%></div>
              <div class="messageinfo">
                <i class="icon-comment"></i><%# DataBinder.Eval(Container.DataItem,"CreatedDate","{0:ddd, dd MMMM yyyy}")%>&nbsp;at&nbsp;<%# DataBinder.Eval(Container.DataItem,"CreatedDate","{0:hh:mm tt}")%></div>
            </div>
          </a>
        </li>
       </ItemTemplate>
        </asp:Repeater>
        </ul>
      </div>
      <li class="seeall">
        <a href="javascript:void(0);" id="hpl_close">Close</a>
      </li>
    </ul>
  </div>

how ever this style sheet affect all master page. so want to omit this style sheet to other page. only this user control have this. so for this i create web user control. but still it's affect all web page.

here i include one screen shot :

please help me...

Answer 1

I'm having a really hard time understanding what you want, but it sounds like you're trying to have a style sheet only target one element in the DOM, which isn't how stylesheets work. So your option is to either give that DOM element an ID and then target all of the rules of the stylesheet specifically to that ID like so:

<div id="thisBox" class="notifbox">

#thisBox { styles go here }

However in this particular case it looks like you're trying to use the Foundation framework for one piece of your design. Foundation is an entire framework that is meant for websites to be built on, I think you're better off rolling your own styles.