Styling and CSS

Question

Recently i found an issue with the styling of a text-area. When i inserted the following code in the view file of a Yii Application and below given styling code in the CSS file, the border of the text area remained as it is when encountered an error, i.e. when i didn't enter any text into a the text-area.

View file code

<div class="form">
        <?php echo $form->labelEx($model,'body'); ?>
        <div class="clear"></div>
        <?php echo $form->textArea($model,'body',array('style' => 'min-width:80%;max-width:80%;min- height:20%;max-height:200px;border:1px solid #666')); ?>
        <?php echo $form->error($model,'body'); ?>
</div>

CSS

.form .error label:first-child,.form .error {
color:#C00;
}
.form div.error textarea,div.form textarea.error{
background:#FEE;
border-color:#C00;
}

Now when i insert the inline CSS code inside the external stylesheet:

 array('style' => 'min-width:80%;max-width:80%;min- height:20%;max-height:200px')

The color of the border of the text-area changes as I wanted. I just wanted to know, whether this happens due to the higher priority of the inline style than that of the stylesheet or due to any other reason.

Answer 1

This sounds like a specificity issue, you can read about it here but the general gist is a sort of priority in CSS like so:

1. !important
2. Inline styles div style="color=red"
3. Element ID's div id=""
4. Classes, attributes and pseudo-classes class="", :focus
5. Elements and pseudo-elements body, :before

The first thing you can do to test if it IS a specificity issue is to use !important after the declaration, if that works, it is, you are defining the style elsewhere and need to overwrite it with something more specific (probably requires an ID)