Increasing indents with heading levels in css

Custom CSS & Theme Design
1

I want to increase the indent and sue smaller fonts (in preview mode at least) for paragraphs that are under lower level headings.
For example, I’d like text that’s under <h1> headings to be flush right, but have a 10px indent for <h2> text and below; additionally, I’d like my <h6> text to be 10% smaller than the rest.

I’ve tried using the ~ construct, by declaring, eg:

h6 ~ p 
{
    font-size: 10px;
}

but it doesn’t work. It’s probably because the <h6> paragraph and subsequent <p> paragraph are each embedded in their own sequences of <div>, as I can see when using the inspector.

Has anyone tried something similar? I don’t know enough css to be able to parse the correct sequence

1 Like
2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.