Standard CSS overriding my CSS?

I have the following CSS definitions in main.css




.tagField div, .tagField img, .tagField input

{

	float: left;

	height: 40px;

	margin-left: 15px;

}




These properties works correctly to images but it seems that form.css is overriding maring-left attribute to input fields.

How should I work? Should I just put the same CSS part to rest of the form.css or is the any better way of using CSS you suggest me to use? What I’m trying to say, I can fix the problem but I’m looking for correct way to add my own CSS to Yii projects.

Not sure I completely understand your question. If you want to change the CSS of all forms just add it into form.css. Yii CSS is just from blueprint.css, it is not completely part of the Yii core (except for defined gridviews, listviews, etc.) so change as you see fit. If you want to change the CSS on grids, lists, etc. just add ‘cssFile’ => false, to the widget and define your own CSS files.

Also not sure exactly what you have that is being overridden. Since you only list a CSS CLASS maybe you have a CSS ID that is creating the problem as that will take precedence. Whats firebug tell you?

Disregard if this is not the info you are looking for.

Actually, that is almost the problem, I think the form.css has also standard CSS CLASS definition for input fields, which will take precedence over my main.css definition. So, the overrided element are just input elements.

I would like to write all my own speacial css to main.css not to get confused. Let say there are tree clases where my css is affecting in the topic sample I gave. If I put one of those to form.css(I mean that one which is affecting to certain input fields), it is no longer behind the same definition than others. I have one CSS definition in two places, which I would like to be in same place. ID definition I can hardly to use becouse those fields are created dynamically.

This is what my firebug tells about input field css




div.form select {

    border-color: -moz-use-text-color -moz-use-text-color #333333;

    border-style: none none solid;

    border-width: medium medium 1px;

    font-family: Segoe Print,Kristen ITC,Verdana;

    font-size: 18px;

    font-weight: bold;

    margin: 0.2em 0 0.5em; //HERE

    padding: 1px;

}



And I guess is that margin definition which overrides my own margin located in main.css(which I can also see in firebug). Becouse if I click hidden to that margin definition, input field would be presented correclty with margin-left: 15px.

So, actually problem is not pretty hard, but just wondering what should be correct way to act situations like this. Write to CSS definition also to form.css? That CSS should affect just certain input fields, not to all.

Again I think this is more of a personal preference more than anything else. I recently just changed many previous form specific css elements in an app. Since I could use some of these new definitions outside of pages where I was loading the form.css page I moved those elements to main.css so they would always be present. If you use the same css pages over and over again on different apps then sure it pays to keep custom code separated.

With css I think one of the major goals is not to repeat yourself and to define as few elements as possible to get the job done. It sounds like you have that understood.