Font-size and font-color in Stylesheet

  • 22 August 2016
  • 5 replies
  • 125 views
B

Hi! I have a question to custom css for font-size and font-color.

I am trying to change styling for different headings (h1, h2 etc), but for some reason the font-size and font-color can’t be applied.

I wish to use this so I don’t have to change every text box manually if I want to make changes to a heading.

Thanks!

  • Beate

5 replies

Mahajan

Hi Beate

You can achieve by either applying the style in text box itself

text

It will work but say you have already applied the css rule for h1 somewhere and above

didn’t work then you want to override the earlier css rules. Then  use ! important after the

css value.

text



 You can also apply the same css rule in css tab in the lower bottom of

edit page. But remember to add tag.above example will be like </pre><pre><b><style><br /></b><b>&nbsp; &nbsp; h1 {<br /></b><b>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;font-size: 2em !important;<br /></b><b>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;color: white !important;<br /></b><b>&nbsp; &nbsp; &nbsp; &nbsp; }<br /></b><b></style></b></pre><pre><b> </b></pre>:)
Joe_Savitch

Customizing fonts is by far the biggest “challenge” in the Unbounce editor. If you don’t know CSS and how CSS selectors work I would recommend googling that first.

The last way that Mahajn listed is the way you want to go. However, have your script tag open with

Also, I don’t recommend using em but using px. every dev has their own preferences you can google why using one or the other may be right for your needs.

The !important tag is as it states important so you make sure that you override any styles that Unbounce may be trying to place on your behalf.

Lastly, for your mobile sizes you can use media queries to dictate the font size at the break point.
@media(max-width:599px) {
h1
{
font-size: 24px !important;
}
}
you have to close both the h1 and the @media(max-width:599px) tag.

Good luck!

Joe

M

I still can’t do this, my css is as follows:

h1, h2, h3, h4, h5, h6 {
font-family: Georgia, Times, serif, !important;
color: #222;
font-weight: 500;
line-height: 1.0;
font-size: 72px, !important;
}

Am I missing something? Thank you!

Joe_Savitch

Why would you want all of your semantic elements to have the same font size? Wouldn’t you want to break this up into 6 different blocks?

Joe

vinwin

You can achieve by either applying the style in text box itself

Reply


Terms & ConditionsCookie settings