Referencing font styles in CSS

Hi! 

I'm wondering if instead of changing a font size/style in CSS you can tell it to reference one of the already set heading / paragraph styles?

Eg. let's say your H1 is already set to 5rem in the built-in font size selection, but you want to make an element that doesn't have the ability to be changed in those settings reference that style.

Eg. instead of doing this:

.form-submission-text
{font size: 5rem;} 

You can just tell the .form-submission-text to use H1.

I know you could simply match the details of the style, but I've noticed that it then doesn't have the flexible / responsive properties that text set with in-built styles does.

If there's not a way to reference the style, perhaps there's a way to tell that text to scale like the built-in styles?

Hope I'm making sense — I come from a design background so i'm a little out of my depth.

Thanks in advance! 😀

10 minutes ago, awd113 said:

I'm wondering if instead of changing a font size/style in CSS you can tell it to reference one of the already set heading / paragraph styles?

Sadly not.

CSS doesn't work this way.

You'll need to specify the class of the element you want to style and then apply the styles to it, as shown in your example. If you are not achieving the responsive style that you require, you may have omitted some of the styles (Squarespace may be applying the default styles with different levels of specificity) or may be using JavaScript to add/remove classes in different situations.

Did this help? Please give feedback by clicking an icon below  ⬇️

Hi Paul. Thanks so much for your comment and advice.

Would you (or anyone else that is reading this) have any idea what kind of scaling Squarespace is applying to their font styles? 

I've tried using various units (em, rem, vh, vw etc.), but doesn't seem to match.

I managed to find this:

font-size: calc((4.5 - 1) * 1.2vw + 1rem);

Which made me hopeful, but even that seems to change when you resize the browser, so I figure their must be something else going on?

Any further advice or ideas would be greatly appreciated.

Thanks!

36 minutes ago, awd113 said:

Would you (or anyone else that is reading this) have any idea what kind of scaling Squarespace is applying to their font styles? 

Different templates and different elements use different methods so it’s difficult to provide an answer without more information, including a link to the page on the site. Perhaps you can explain the issue? What isn’t working without custom code? What are you trying to achieve?