What is the CSS for formatting headers uniquely on the same form?

I understand how to format headers that affect all headers the same. I need to know how to format headers individually. 

This is the difference:

1) If you want to change only one field, in this case sub-heading, you have to find his ID, and to do so you can right click on it:

2) Then in the console, you can see its ID:

Which is: subHeader_223 and that ID is unique, so it refers to that field only.

So if you apply CSS to it, it will work for that field only:

#subHeader_223 {

    color: red;

    font-size: 18px!important;

    text-transform: uppercase;

}

But if you use class instead of ID:

.form-subHeader {

    color: red!important;

    font-size: 18px!important;

    text-transform: uppercase;

}

That will affect all sub-headers.

Hope it helps.

Thank you!

I need to increase the width (make it thicker) of the top border.

I tried:

#subHeader_223 {

border-top-width: 2px;

}

No luck.

You can use the code below instead of setting size or "2px". However, please note that you need to target the field with border, it will not work on the subheader because they have no border.

.form-header-group {

    border-top-width : thick!important;

}

Hope this helps!

Jherwin,

That changes it on ALL of the headers. I wish to do this on select headers. Not all of them.

So it is the top of the Main Entrances header (#cid_223) that you want to increase its border?

If yes, this is the CSS code.

#cid_223{

border-top : 4px solid #98B7D2 !important;

}

In case you want to target more fields, you can separate the ID selector with a comma.

Example:

#cid_223, #cid_224{

border-top : 4px solid #98B7D2 !important;

}

This did not work.

I checked your form and the top border is showing thicker than other ones:

So I assume you were able to make it work.

Let us know if you need any further assistance.

Thank you!

It doesn't show in 'build', but does show in Preview, which is all that matters. Thank you!