nested css values in asp.net

Question

I have the following in my Site.css file for normal formatting:

input, textarea {
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #333;
    font-size: 1.2em;
    margin: 5px 0 6px 0;
    padding: 5px;
    width: 300px;
}

Then I have a reportViewer control which contains textareas and due to the css above it looks wrong. For that I need to set:

input, textarea {
}

How can I have both code sections in the same css file or how can I tell the reportViewer control to ignore any css styling from the Site.css file?

asx code:

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">

    <div runat="server" class="reportViewer-wrapper">
        <rsweb:ReportViewer ID="rptViewer" runat="server" Font-Names="Verdana" Font-Size="8pt" Width="100%" Height="1000px" ProcessingMode="Remote" WaitMessageFont-Names="Verdana" WaitMessageFont-Size="14pt">
        <ServerReport ReportPath="/Reports/Tracking" ReportServerUrl="http://srv/ReportServer" />
        </rsweb:ReportViewer>
    </div>
</asp:Content>

CSS:

.reportViewer-wrapper input, .reportViewer-wrapper textarea {
     /* needs to be blank - default settings*/ 
}

.reportViewer-wrapper td {
    padding: 0px 0px 0px 0px;
    border: 0 none;
}

Answer 1

Your rules are very general and you should probably make them a bit more specific e.g. by addressing a certain class.

To give an example, wrap your ReportViewer into a div

<div class="reportViewer-wrapper">....</div>

and reset your input and textarea for that clas

.reportViewer-wrapper input, .reportViewer-wrapper textarea {
     /* whatever styles you need */ 
}

Answer 2

Cascade Stylying Sheets are cascading...this means that you can override things. So that last thing you tell is what it will do.

This to tell you that you can use a class to override the textareas in the control.

for example you could do something like this:

input, textarea {
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #333;
    font-size: 1.2em;
    margin: 5px 0 6px 0;
    padding: 5px;
    width: 300px;
}

.reportViewerX {
    /* New Styles */
}

This would mean that just the textarea with the class reportViewerX would have the new styles. All the others would remain with same has before.

UPDATE:

Has per comments and answer from boldty I should add some explanation.

Wrap your control on a div and add a class to that div like so:

<div class="reportViewerX">
    <YOUR CONTROL>
</div>

Then in the CSS add this after the general one:

.reportViewerX input, .reportViewerX textarea {
        border: 5px solid #000000;
        background: #000011;
        color: #222;
        font-size: 1.1em;
        margin: 10px 0 6px 0;
        padding: 3px;
        width: auto;
}

Enter values that you want, I just typed random values.