creating and styling a <div> within a page

Question

I want to create and style a section of some WordPress Pages that will be a kind of inset section: that is, it will be like an "aside" to the main text, so it will be a special font and color and so forth.

I tried adding <div> and </div> around some paragraphs in the text editor, with the class inset. I then added some custom CSS styling this red. It worked!

However, what I want to do now is adjust the width and indentation of this div block, and give it a gray background. What is a good way to go about doing this?

I understand that the div is probably contained within other divs that make up the wordpress page. How much do I need to understand about the structure of a Wordpress Page in general to accomplish this and not run into strange interactions with existing structural elements?

Alternatively is there a plugin or widget that would make this possible?

Answer 1

You could create a styled section/div in your page/post content by using WP shortcode. if you could manage a time then you could create your custom shortcode with your requirement. But if not then you could select available plugins here: Shortcode Plugins