Q:

Why page style being overriden by external CSS file?

I have main.css file where I define standard size for inputs:
/* Describe general input element sizes */
input[type="text"], input[type="password"]
{
    width: 180px;
    border: 1px solid #aaa;
}

This CSS referred in header of the page. Later in page I define following:
<style>
        .shortField {
            width: 50px;
        }

    </style>

I assign class "shortField" to my input box but size is not applied. F12 screenshot:

A:

The specificity of the first selector is 0-0-1-1, the second selector's specificty is 0-0-1-0, which means the first selector will override the second.
To override the initial selector, you only need to match the original specificity, as the second selector is later in the cascade.
The following selector should be enough to override the match with input[type="text"], I've listed .shortField twice so that it will continue to match cases where it was used on non input elements.
.shortField,
input.shortField {
    width: 50px;
}

An alternative would be:
body .shortField {
    width: 50px;
}

Be very careful when raising the specificity of selectors. It's very easy to get into specificity games where you end up writing nonsensical styles like:
#foo #bar #baz #fizz #buzz .lorem .ipsum ul li a {
    margin-left: 0 !important;
}

Try to use the lowest specificty selectors that you possibly can.

A:

You need to learn about specificity...

The least specific stylesheet is what you link (External file)
They styles you declared between document head tag is more specific than an external stylesheet
And last but not the least, inline styles are MOST specific

And so in order to over ride, use !important(Don't use it if you don't know what it does and how it works) declaration or use more specific CSS selector like the one below
input[type=text].shortField {    /* This is more specific than simple element selector */
    /* Styles */ 
}

