HTML For WordPress Users Part 3

Part 3: DIVs and CSS


Sometimes it is useful to create a section or division (div) within your web page so you can apply special formatting just to that section. For example, you might want to have a breakout paragraph with a special coloured background to stand out from the rest of the page.

To use divs you create div tags in your page to define the areas, and use a class tag to define the styling rules. Then make sure you create the CSS rules for that style.

<div class="breakout" >
Breakout content goes here

In your CSS rules for your site you would then have formatting rules for the breakout style:
.breakout {background-color: #CCCCCC; border: solid 1px #000000}

More Advanced Topics

Floating a division / section of a page

This is a division of text that has been given a width of 40% and floated to the right.

Using HTML you can create a division within your page. You can then set a width for the div, and also apply a style to it. The most common reason for doing this is to take a part of a page (text and/or images) and float it to the left or right of the rest of the page. The div you see to the right has been setup using the following HTML:
<div width=”40%” class=”alignright”>
This is a division of text that has been given a width of 40% and floated to the right.

But you can also apply an additional class to a div so you can style it with CSS so it looks different.

This chunk of text is in a division (div) that has been floated to the right and formatted with CSS rules.

This is the HTML code that is used to create the floated div you can see to the right.
<div class=”breakout alignright”>
This chunk of text is in a division (div) that has been floated to the right and formatted with CSS rules.

The div is created simply by surrounding a part of the web page with <div> and </div>

You can assign on or more classes to the div by adding a class=”yourclass” clause to the opening part of the div. There are two classes applied to this div that use CSS rules from the website’s style sheet. The alignright class has the CSS rules that float the div and right align it. The breakout class has the CSS rules that set the width of the div and apply the background colour / border styling.

You can create new CSS rules for your own purposes using Dashboard, Appearance, Site Design and using the Custom CSS field. For example, to use a style called blueborder you would add this to your site’s Custom CSS:
.blueborder {border: solid 1px blue;}

This is the CSS rule (with 6 parts) used for the breakout style used on this page:
.breakout {width: 250px; background-color: #EEE; font-style: italic; border: solid 1px green; margin-left: 25px; padding: 10px; }

Once a style has been created, you can use it on any div like this:
<div class=”blueborder”>

And of course you can add the alignright or alignleft classes (which already have rules ready for them) to float the div to the left or right.

Note that you can add class=”alignright” to an image tag, so you don’t have to put an image in a div just to float it. If you want to float several images together with text, or float several rotators in a group, you would use a div for that.

Learn More with Treehouse

If you have found learning about HTML useful and want learn more, I can highly recommend Treehouse – they have put together a really well structured set of materials to walk you through HTML in some detail. And they cover CSS as well.

The link below is my referral link from Treehouse. If you use that link to sign up, you get 50% off your first month, and I get a discount on my subscription. So thanks in advance if you do use it!

Back to Part 2: Images and Tables

OM4 Logo RGB

About OM4

OM4 is an Australian based web agency that helps you find customers and convert online. We specialise in creating custom designed WordPress and WooCommerce websites that our clients can update themselves. So you get to express your brand without being tied down to the constraints of a template, but you can still update your own content using a state of the art page builder. We develop plugins, so we know our way around code. Interested? We'd love you to get in touch.