Question: ```
<style>

input[type="text"] 
{
    width: 200px;
    border: 1px solid #CCC;
}

</style>
<body>

<input type="text" name="test" value="test" size="5" />
</body>

```

When this is viewed on browser (Firefox 5), the "size" it appears is a fixed 200px. It seems the size I specified is completely ignored. 

This is from a MVC project, and that is the default style css that comes with it. For the time being, I took off the width: 200px. But is there a way to keep it there, and override it at the "input" level?

I also tried

```
<input type="text" name="test" value="test" width="50px" />

```

It did not override at all.

Answer: 
Don't set display ***style*** in the HTML.

Use:

```
<input class="narrowInput" type="text" name="test" value="test" />

```

Or:

```
<input id="narrowInput" type="text" name="test" value="test" />

```

Only don't use "narrowInput". Use a name that has a business meaning, that is: one that describes the purpose of the input data.

Then the CSS is:

```
input.narrowInput
{
    width: 50px;
}

```

Or:

```
#narrowInput
{
    width: 50px;
}

```
Remove either 

```
input[type="text"] 
{
    width: 200px; //THIS
}

```

or 

`<input type="text" name="test" value="test" size="5" <--//THIS />`

Choose to style using one or the other.