How can I change the font size for labels in HTML?

Dung Do Tien May 27 2020 120

Hi, I have a form with some checkboxes and labels as below:

<div id="hobbies">
   <input type="checkbox" name="hobbies" id="cbTravel"/>
   <label for="cbTravel">Travel</label>
   
   <input type="checkbox" name="hobbies" id="cbFishing"/>
   <label for="cbFishing">Fishing</label>
   
   <input type="checkbox" name="hobbies" id="cbOther"/>
   <label for="cbOther">Other</label>
</div>

Now how can I change the font size of label text to 17px?

Thank you for any suggestions.

Have 1 answer(s) found.
  • Hello,

    You can use the font-size property of CSS to do.

    1. Write CSS inline

    You can set direct CSS into label tag by style attribute as below:

    <label for="cbTravel" style="font-size: 17px">Travel</label> 

    but you need to repeat more time to do.

     

    2. Make a class for all labels.

    <style>
       .f-size17 { 
           font-size: 17px;
       }
    </style>
    ..............
    <label for="cbTravel" class="f-size17">Travel</label> 

    With this way you also copy f-size17 class for all label tags.

     

    3. Write selector for all label tag

    #hobbies lable{
       font-size: 17px;
    } 

    I recommend you use way 2 or 3 to easily maintain and reusable.

    Marry Christ May 27 2020
Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Popular Tips