Heading and Paragraph Spacing

[Rumble32]

Hello,

I want to change the following in my theme-
H1 tag- 2em
H2 tag- 1.5em
H3 tag- 1.2em
H4 Tag- 1em

I also want to be able to adjust the margin above and below the Headers so the page does not look too crowded. I guess the ideal margin is -
h1 margin: .67em
h2 margin: .75em
h3 margin: .83em

I have tried in the past to change some of these characteristics and the CSS looks like below. Could someone pls suggest what I need to change or give me a new CSS? I am not knowledgeable enough when it comes to CSS and don’t want to play around with it too much on my own.

.single-post p {
margin-bottom: 30px !important;
}

.single-post h3 {
margin-top: 20px;
}

.single-post h4 {
margin-top: 20px;
}

.single-post h2 {
margin-top: 30px;
}

.x-colophon .widget ul li a,
.x-colophon .widget ol li a {
color: #fff;
}

.entry-content h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {word-spacing: 0px; letter-spacing: 0px;}

.single-post .x-main .hentry .entry-featured {
display: none;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
letter-spacing: 1px !important;
}

p {
margin-bottom: 30px !important;
}

.single-post h2 {
font-size: 1.5em !important;
}

h2, .h2 {
font-size: 1.5em;
}

h3, .h3 {
font-size: 1.3em;
}

h4, .h4 {
font-size: 1em;
}

h1, .h1 {
font-size: 2em;
}

[rad]

Hi @Rumble32,

Thanks for reaching out.

Those are seems to be correct, and you may add !important and margin as well. Example,

h1, .h1 {
font-size: 2em !important;
margin: 0.67em 0 !important;
}

I’m not really sure what your target outcome or design so I can’t provide any advice on other areas of your CSS. Buf for headlines font size and margin, that one sample should do and you can apply the same format on other headlines.

Thanks!