Override CSS.

[sapator]

Hey. Got a problem here.
I have a CSS file that is the master file and has:

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  display: inline-block;
  height: 34px;
  padding: 6px;
  margin-bottom: 9px;
  font-size: 16px;
  line-height: 18px;
  color: #555555;
}

Now i insert text input object and i try to override the height(on another CSS file):

.textnewssearch {

    position:relative;
    float:right;
    padding-right: 2%;
    height:10px;
    width:20%;

    }
   .uneditable-input
    {
        display: inline-block;
        height: 4px;
        padding: 6px;
        margin-bottom: 9px;
        font-size: 16px;
        line-height: 18px;
        color: #555555;
    }

 <h2 class="h2news">News <input id="Text1" type="text" class="textnewssearch uneditable-input" /></h2>

It will not change the size either on 10 or 4 px; Will maintain the main css height(34px).
It will only work if i use this on the custom CSS file but i am afraid i might block the main CSS file like that:

.textnewssearch {

    position:relative;
    float:right;
    padding-right: 2%;
 /* no need now    height:10px; */
    width:20%;

    }

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
   .uneditable-input
    {
        display: inline-block;
        height: 4px;
        padding: 6px;
        margin-bottom: 9px;
        font-size: 16px;
        line-height: 18px;
        color: #555555;
    }

Is this correct or i am blocking the main CSS?
Thanks.

P.S. I would also appreciate if you tell my why this(the text object) appears a little lower from the H2. It will get out of the frame and go a little lower.

 
(.h2news
{
    position:relative;
    width:100%;
    text-align:center;
}

[sapator]

Ignore the text object position, i was stupid enough to think that the new VS2012 Design mode renders the HTML better than VS2008. I was wrong.It's still crappy as hell.

[tr333]

Try checking the DOM inspector that comes as part of the browser developer tools. It should show you which CSS rules are active and which rules are being overwritten by another rule. Are you loading the stylesheets in the correct order?

[sapator]

Now, hold on there. What right order?
So if i declare one CSS above another on markup it will use it's code?What, the, i did not know that, is it true?
Anyhow this will not make a difference because in one part of the page i may need the main CSS and on another the secondary CSS. My code works with what i did above but the main CSS controls most of the html objects. So if i have to do this for every object on every page I'm really sc#ewed here.

[tr333]

Don't forget the "C" in CSS stands for "Cascading". Order of styles can make all the difference to what gets applied to your page. Firefox and Chrome also support the scoped attribute for scoping <style> tags that are placed inside other elements.

[sapator]

Ok, i'll see what i can do but i think i must inherit about 1000 lines of CSS
Thanks for the scoped attrib. Unfortunately it will matter running on Iexplorer so i can't use that.