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

Dung Do Tien May 27 2020 1800

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>

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

Thank you for any suggestions.

Have 1 answer(s) found.
  • M

    Marry Christ May 27 2020


    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.

       .f-size17 { 
           font-size: 17px;
    <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.

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

X Close