Can you add a new header type h4 available to all pages in SS?

Hi,

I am a rookie learning both CSS and Squarespace. Can I add the CSS below or a version of it to Squarespace so that it's available throughout all pages?

I added the snippet below, which i tested the snippet on w3schools, and put in the Style Manager on Squarespace, but don't see "h4" anywhere.

Where can I add it?

And is the CSS okay?

thanks,Deac

h4 { /* IS THIS FOR SquareSpace */ font-weight:50; color: #1920f0;}

Hey Bud,

You need to insert your CSS code into the "Code Injection" tab of your Settings Area in your Squarespace site.

You'll need to insert the code into the "Header" section.

Also make sure you add the CSS properties into the code such as this:

<style type = "text/css">

 h4{

   font-weight: 50;
   color: #1920f0;

 }


</style>

Once you have inserted this code into the Header, everything should be sweet.

Also, when you are creating pages and adding in headers, the editing tool bars we have in the page editor don't have h4 headers as an option. If you wish to use h4 you may need to insert it as a code block and use some more CSS code.

Let me know how this goes for you :)

Thanks so much, this is far and away the most helpful information I've received yet.

So would I put the code block on each page where I want to use the h4 or is there a place I can put it for all pages?

Can you give me a tip as to what CSS I might put in there?

Thanks so much for the helpful response,-deac

Thanks so much, this is far and away the most helpful information I've received yet.

So would I put the code block on each page where I want to use the h4 or is there a place I can put it for all pages?

Can you give me a tip as to what CSS I might put in there?

Thanks so much for the helpful response,-deac

So, essentially the coding you have down already for the h4 only applies to it's styling. For the moment I am not aware if there is code where it automatically places h4 on a page...

I would suggest using a code block.. the outcome you get will look exactly the same as compared to a text block.

Aha, I think you've given me what I need to do this, thank you.

So on the page where I want it I put a code block with the CSS to specify the h4 and the html to create the h4?

Thanks so much for filling in the missing links. Any more advice would be quite welcome. Thank you, thank you , thank you.

You only need to place the h4 CSS code in one instance... where you have placed it into the header section of the code injection tab... This will be the only one time where you need to use this code. (as all you are doing is assigning new design principles to h4.)

Whenever you need to use a header 4 on a page you are creating... only use your h4 html tags. You will need to use these tags every time you wish to use a heading 4 in a code block.

Hello World

I meant to say HTML code, not CSS code in the paragraph above. :)

Thank you again. So I put the CSS code to specify my new h4 on one page and put the

html on that page and other pages where I need h4?

Good enough, I'll play with it. You've helped me a very great deal.

I've actually created a plugin that adds h4, h5, h6 to the Squarespace text editor. This is an alternative to using a markdown block or code block, so that you can simply add headings along with the rest of your text (without adding extra gaps).

The Advanced version also allows for additional headings, custom styles, superscript, subscript, underline and more.

Now, with the headings added to the 'format' dropdown, you'll need to add the styles via the CSS Editor in order to customize them. Like this, for example:

h4 {
 font-size: 30px;
 color: #CCCCCC;
}
h5 {
 font-size: 40px;
 color: #BBBBBB;
}
h6 {
 font-size: 50px;
 color: #DDDDDD;
}

-Brandon
Project Mgr. and Developer at Ignertia
Creator of Squint - H4, H5, H6 & Custom Styles for Squarespace