Text aligning and divs

In my previous tutorial I first wrote that paragraphs can be text align. THIS IS WRONG AND I HAVE FIXED THE TUTORIAL. The preview WILL show it works..... but won't work once you submit a comment, journal, submission, etc. So how do you align? You have to use the div tag.

Ah yes, the div tag, how I love you so when coding a site. These are the backbones used for layout. Don't worry, no big lesson here! They are only used for one main thing here, text aligning. But what exactly is a div? It's a block element, it is a division or section. You can add many elements within a div, like paragraphs, links, headers, and more!

The code

<div>This is a div</div>

<div>
<p>This is a <span style="color:#FF00FF;">div</span> with some stuff in it!</p>
<ul><li>Stuff</li><li>More stuff!</li></ul>
</div>

Which renders

This is a div

This is a div with some stuff in it!

• Stuff
• More stuff!

Only divs can be aligned. Weasyl handles text aligning differently then usual. Not too incredibly different but instead of adding a property to the style attribute, they have pre-built classes you can use. I won't go into details about classes and ids are you cannot create your own here.

There are four ways to align: left (default), center, right, and justified. Unless it's a special reason, you don't have to align left as that is the default.

The breakdown

<div class="align-center">TEXT HERE</div>
class - designates we are using the class attribute, we are going to call a class
=" " - class name goes in between the quotes
align-center - class name

The code

<div class="align-left">Aligned Left</div>

<div class="align-center">Aligned Center</div>

<div class="align-right">Aligned Right</div>

<div class="align-justified">Aligned Justified</div>

Which renders

Aligned Left

Aligned Center

Aligned Right

Aligned Justified

What is justified?

---

---

Practice!

Use the comments below to test it out yourself!

Part 3