Applying custom css to <p> elements of an HTML element

Ask us anything
1

Apologies in advance for what may be the stupidest question ever asked on this forum…

I have an HTML element which is populated by a series of paragraphs:

<p>Some text</p>
<p>Some more text</p>
<p>Some more text</p>

I am trying to add (vertical) space between the paragraphs. I would like to use margin-bottom, but this applies to the element, and not the paragraph. My embarrassingly simple question is how do I do this by using the Custom CSS editor on the HTML element.

PS: I know I could do this in the HTML code itself, but the content will be dynamic so I want to keep it as clean as possible. I know I could also use ‘br’, but I want more control over the spacing.

2

If you want to use a single html element, then you need to style in the same way you would style it in a static html page. Either load a css file in the head of the page and assign classes to the elements or you use inline style. Maybe put the elements in a container and style the container to get the layout that you want.

Needless to say that this is much easier if you use weweb elements instead.
If yoou have a list of texts you can bind it to a container, add a text in the container and automatically have your list of texts that you can style with the editor interface.

If you use the html element with dynamic data be careful, you are trusting that the data is safe.

3

Thanks so much for your help @dorilama! I got it working with a container and text elements as you suggested, and it makes complete sense that this would be safer.

Your suggestion to do this with a css file in the head of a page makes sense, but out of curiosity is there no way to do this just by using custom CSS on the element?

1 Like