CSS classes in HTML section stacks

Hi all,

I’m struggling to make use of the CSS classes in the HTML property pane of the stacks.
To try out how it works I added a text stack.
In the CSS of the page I have this:

p.italic { font-style: italic; }

And in the CSS classes field I have this:

class=“italic”

And of course the text between

But I can’t get it to work.

Am I doing it wrong?

Thanks,

Jeu

Not knowing what “text” you are applying the CSS to, my best guess would be that you don’t have a “paragraph”. That is what the p means.

Since you said text stack, I’m assuming you are using the default text stack. You have a few options here. You could mark the text as a paragraph:

You could remove the p from the selector in the CSS:

.italic { font-style: italic; }

You could use the Markdown stack (it makes proper HTML paragraph tags)

Hi again Jeu,

Following on from what @teefers has correctly said, there are a couple of ways towards applying an italic font style. You can use the rich text editing controls in Stacks, wrap the content inside HTML <em> and </em> tags, or use a Markdown stack and wrap your content between asterisk * marks.

If I understand correctly, you can also use the classes method and assign your stack a class name:

Then in the Page Inspector > Code > CSS box, enter this:

.make-italic {
	font-style: italic !important;
}

(Click on the screenshots if you need to see them larger).

You may be curious to know what !important does. People often ask me this!

There’s a good explanation here:

This declaration works to force the element to take this style and override any inheritance from elsewhere (like a theme or another stack).

It can sometimes be the difference between CSS code working, or not! So it’s sometimes worth a try, if your CSS is correct but it does not seem to take effect. One of the slightly more confusing aspects of CSS.

Hopefully one of these solutions helps :slight_smile:

Hi Will and Doug,

Sorry for the misunderstanding I created. I just mentioned the text formatting as an example to explain what I’m trying to do. The CSS classes is something I want to learn more about, see also the screenshot, and maybe the text example was not the best I could give. What I want to know is how I have to use the CSS classes to my advantage.

But from the example Will gave in his reply I can see I made a mistake bij typing in the class. I typed in class=“italic” in the field and now I se it just has to be the class without the Class’“”.

Thanks for your quick replies.

Jeu

I succeeded in working with the CSS classes. Thanks

1 Like

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