Styles using CSS issue - html

Question

I want my comments input text box to be bigger than other fields in the form. I have got the following code in my add form:
<div class="divm centerdiv">
<?php echo $this->Form->create('Call'); ?>
<fieldset>
<legend><?php echo __('Add Call Details'); ?></legend>
<?php
echo $this->Form->input('call_date',array('required'=>false,'id'=>'datepicker','type'=>'text'));
echo $this->Form->input('call_time', array('required'=>false));
echo $this->Form->input('comments', array('required'=>false, 'id'=> 'comments'));
echo $this->Form->input('next_call_date',array('required'=>false,'id'=>'datepicker2','type'=>'text'));
echo $this->Form->input('customers_id', array('label' =>'Customer Name','options'=>$customers, 'label'=>'Customer Name', 'required'=>false));
echo $this->Form->input('employees_id', array('label' =>'Employee name','options'=>$employees, 'label'=>'Employee name', 'required'=>false));
?>
</fieldset>
<?php echo $this->Form->end(__('Submit')); ?>
</div>
I have added an ID for the comments and my style sheet as follows:
//some code
.divm
{
width: 50%;
}
.centerdiv
{
margin: 50px auto;
}
divm.comments{
height: 20px;
width: 20px;
}
//some code
I want to change the size of the text box of comments to a bigger size than the other fields. I have tried to do this by adding the "divm.comments{}" parts in the style sheet adn it doesn't seem to work.Can someone help?

Answer 1

You are using the wrong (in this case invalid) selector. It should just be
#comments {
height: 20px;
}
For information, the syntax you used to trying to select an element with a tag name of divm (no such thing) that has a class name = comments
What you may have been thinking is select input with id = comments inside div with class = divm in which case it should have been .divm #comments (note the space) however it always more performant to select elements with id (they - or at least should be - unique)

Answer 2

You can use # for element IDs. . is for classes. Your new style sheet would be as follows:
.divm
{
width: 50%;
}
.centerdiv
{
margin: 50px auto;
}
#comments
{
height: 20px;
width: 20px;
}
Note: IDs must pertain to only one element so if you want to have multiple comments fields your original css would be correct (apart from the missing . before divm.comments) but you'd have to set comments as the class in php.