n1ckbowers n1ckbowers - 2 months ago 15
CSS Question

no access to html - trying to style some text bigger

im using a CMS to try and alter a fundraising form so the text is bigger.

i've managed to alter the paragraph and easily enough but there are some stubborn labels that i cant get to go bigger - here is one - i'd like the words "Payment Frequency" to be 20px or so....

<div class="field select required">

<label for="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_DropDownPaymentFrequency_DropDownList" id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_DropDownPaymentFrequency_LabelForDropDownList">***Payment Frequency***</label>
<select name="ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder234$FormControl1$DonationSection$DropDownPaymentFrequency$DropDownList" id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_DropDownPaymentFrequency_DropDownList">
<option value="">Please Select...</option>
<option selected="selected" value="Monthly">Monthly</option>
<option value="Annually">Annually</option>

</select>
</div>


i have been able to style these individually but there must be a better way, there are loads of them, here is another example:

<div class="field text date required">

<label for="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_CollectionDate_DropDownListDay" id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_CollectionDate_LabelTextBoxCollectionDate">Collection date </label>


i tried styling all "labels" but only the first one changed. the rest stayed the same.

any help would be appreciated! i work for this charity!

thanks
nick

Answer

There could be another CSS rule which is overwriting your new CSS rule. You can use the !important to overwrite an already existing CSS rule. See the following:

div.field label {
  font-size:20px !important;
}
<div class="field select required">
  <label for="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_DropDownPaymentFrequency_DropDownList" id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_DropDownPaymentFrequency_LabelForDropDownList">***Payment Frequency***</label>
  <select name="ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder234$FormControl1$DonationSection$DropDownPaymentFrequency$DropDownList" id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder234_FormControl1_DonationSection_DropDownPaymentFrequency_DropDownList">
    <option value="">Please Select...</option>
    <option selected="selected" value="Monthly">Monthly</option>
    <option value="Annually">Annually</option>
  </select>    
</div>

Hint: Make sure your CSS rules are included after the CSS files of Frameworks (like Bootstrap or Foundation).

Comments