You can use the ‘div’ tag to create a box that will hold some text you want to set apart from the regular flow of your page. The important styles you will want to apply to your ‘div’ are:
- padding – so your text isn’t right up against the borders of your div
- border – to make your div distinct from the rest of your text
- background color – to further make your div stand out
- justification, or ‘float’ – to make your div stay to one side and have the rest of the text flow around it
Your ‘div’ box could contain text, images, video – really anything that could go elsewhere on a web page. It’s really an organizing block for web pages, but we’ll consider them here for making asides and callouts for text. To start with, ‘div’ tags mean we must use the ‘Text’ tab in the WordPress editor. Here’s how we would start.
<div>Some text</div>
Now we want to give it a border so we add a style.
<div style="border:1px solid black;">Some text</div>
This results in something that looks like:
Next we will add some more text and put in some ‘padding’ between the text and the border. Notice that when we use two styles we use a semi-colon to separate them.
<div style="border:1px solid black; padding:5px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent libero est, lobortis nec pulvinar vitae, semper nec nunc.</div>
Here’s what this looks like.
We want to control the width of this div so we will use another style.
<div style="border:1px solid black; padding:5px; width:150px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent libero est, lobortis nec pulvinar vitae, semper nec nunc.</div>
The width can be specified in pixels or ‘px’ as above or as a percentage of the available space – so ‘150px’ above could be replaced with ‘30%’. The div with a defined width of 150 pixels looks like this.
We might want to make the div more distinct with a background color. You can use some pre-defined color names that most browsers will recognize (like yellow, red, brown, blue, green, black and white) or you can use a color code. You can find more about color for web pages at W3 Schools. Note that this is yet another style called ‘background-color’.
<div style="border:1px solid black; padding:5px; width:150px; background-color:lightblue;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent libero est, lobortis nec pulvinar vitae, semper nec nunc.</div>
The result is a div with a border and background color that really stands out from the rest of the text.
The last thing you might want to do is have your div justify to the right while text flows on the left. This is what an ‘aside’ uses – the text sits separate from the narrative, to be read (or not) independently. The style for doing this is called ‘float’, and you also need some space to separate the narrative text from the outside border of the div. For this you can use ‘margin’. Here’s what the HTML looks like.
<div style="border:1px solid black; padding:5px; width:150px; background-color:lightblue; float:right; margin-left:10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent libero est, lobortis nec pulvinar vitae, semper nec nunc.</div>
Now we combine this text with a few paragraphs of our standard web page. The div, styled to float on the right, is followed by the paragraphs that will flow on the left, and we get the following result.
Quisque luctus tortor vel odio interdum varius. Fusce a condimentum metus. Mauris vehicula eros ac ligula mattis, non scelerisque sapien condimentum. Nullam gravida scelerisque ligula. In hac habitasse platea dictumst. Duis vestibulum orci a porttitor interdum. Aenean semper non velit vitae ultrices. Ut augue metus, aliquet at faucibus nec, ornare et elit. Donec vitae nunc efficitur, feugiat nisl id, consequat turpis.
Cras consectetur rutrum arcu. In consequat vitae orci at sagittis. Quisque eget leo in dolor venenatis ornare in sed dolor. Maecenas ultrices sodales ante eget viverra. Nulla ut metus orci. In at velit vitae turpis dignissim aliquet. Vestibulum ipsum nisi, tristique suscipit tellus ac, consectetur interdum augue. Donec imperdiet vulputate elit, sit amet dignissim neque gravida vitae. Morbi non leo varius, commodo felis quis, rutrum nulla.
Donec suscipit nisl sit amet porttitor finibus. Phasellus porttitor congue sapien nec viverra. Praesent non ligula non enim blandit maximus. Donec ex dolor, hendrerit eu purus ut, auctor ornare metus. Nam imperdiet ex vel eros luctus dictum. Donec bibendum arcu erat, sit amet luctus ante convallis in. Sed laoreet sem sit amet sem mattis vulputate. Nunc lacinia dapibus velit, ut tincidunt diam vestibulum nec. Cras ut dui dui. Aliquam eu porta urna. Phasellus pharetra, elit ut finibus placerat, mauris ante congue ante, id porttitor magna sem vitae lectus. Quisque vitae ante posuere, semper lorem sit amet, porttitor diam. Aenean fermentum, nisi quis sagittis interdum, mauris justo vestibulum augue, sollicitudin consequat velit ante in arcu. Curabitur turpis sem, consectetur dignissim fringilla vel, ornare vel mauris. Praesent id nibh viverra, pellentesque felis quis, vehicula metus. Fusce sem urna, iaculis id libero a, blandit facilisis libero.
This is a bare-bones introduction to using the ‘div’ tag to customize text. You can learn more at W3 Schools.
You can try out these steps by copying and pasting the HTML above into the tool below. Customize it to your own needs.