How to exclude specific the form from the css applied to body

Question

If i have a form in body with specific style and i want to exclude this form from this style(the body style) .

<body>
    <form id="form1" runat="server">
        <div class="demo-containers">
            <div class="demo-container" id="decorationZone">
                <h4>Student Schedule</h4>

                <fieldset>
                    <legend>Registeration Number</legend>
                    <label for="<%= UsernameBox.ClientID %>" runat="server">RegNum:&nbsp;</label>
                    <asp:TextBox runat="server" ID="UsernameBox" Width="150px" TabIndex="7"></asp:TextBox>
                </fieldset>
            </div>
        </div>
    </form>
......
</body>

The problem is : the body has a css and i want this style not applied on my form ,

adib.mosharrof · Accepted Answer · 2016-05-08T09:36:37.423

1

You could just override the style you dont want. Lets say that your body has a red background, so in your form just override the background color to white. I have created a small demo like this below.

Demo

body{
  background-color:red;
}
form{
  background-color:white;
}

There is a property called all in the CSS3 inheritance module. It works like this:

form {
  all: default;
}

edited May 08 '16 at 09:36

answered May 08 '16 at 09:18

adib.mosharrof

1,624
1
12
16

I want to override everything, Should i create a rule for every one exist for the body ! – Anyname Donotcare May 08 '16 at 09:23
yes, you will have to override all those style for your form tag or you could just remove those styles from the body tag. – adib.mosharrof May 08 '16 at 09:25
I just want to exclude the form from the body style ! – Anyname Donotcare May 08 '16 at 09:27
yes you will have to override all the body styles in the form. – adib.mosharrof May 08 '16 at 09:30
This question answers your query http://stackoverflow.com/questions/5080365/css-to-prevent-child-element-from-inheriting-parent-styles – adib.mosharrof May 08 '16 at 09:32
Why downvote the question !! – Anyname Donotcare May 09 '16 at 13:10
it is a duplicate question.. if had you searched a bit more, you would have had your solution. – adib.mosharrof May 15 '16 at 06:48
Okay , thanks a lot :) – Anyname Donotcare May 15 '16 at 07:11

score 1 · Answer 2 · answered May 08 '16 at 09:42

1

You can use CSS negation and leave out what you don't want to inherit from body:

body :not(form) { 
  background-color: red;
}

answered May 08 '16 at 09:42

Andy Hoffman

18,436
4
42
61

score 0 · Answer 3 · answered May 08 '16 at 09:19

unfortunately if you apply a body style on a page it will affect all the elements of the page. I think you can only redefine the property of your body in your form style. in the css you should recover your form that you want to exclude from your style

#form1

And you will have to overwrite the css property that you don't want.

How to exclude specific the form from the css applied to body

3 Answers3