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: 
If you want to override the CSS width at the element level, try applying the style tag to the element directly:

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

```

This works for me:

```
<html>
   <style>

      input[type="text"] 
      {
         width: 200px;
         border: 1px solid #CCC;
      }
</style>
<body>
      <input type="text" name="test" value="test" style="width: 50px;" />
</body>
</html>

```

Edited to Add:

Yes, mixing HTML w/CSS is considered a no-no, so the *proper* solution would be to extract it out to a class in the end:

```
.my_text_box {
    width: 50px;
 }

```

Then:

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

```
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.