Properly styling your content can really liven up the post and make it interesting for the reader. This is a basic guide which will cover all the styles available to you whenever you post. Making use of these options can make or break your article or tutorial.

The Basics

• All line breaks will occur automatically.
• You do not need to wrap your text in "p" tags.
• Any HTML or other code that is not allowed will be excluded automatically when you post.
• Web links and email addresses will turn into links automatically.
• Don't worry about email addresses, they will be obfuscated in a human readable fashion or (if JavaScript is enabled) replaced with a spamproof clickable link.
• Don't worry about manually resizing images. Either uploading to Designmess via the "Add Image" button, or adding a set width to your image tag (we recommend width="630" ) and Designmess will automatically create a thumbnail of your image.

Put Emphasis on your Text

This is strong.

This is <strong>strong</strong>

Also interchangeable with <b>bold</b>

Let's use italics.

Let's use <i>italics</i>.

How about some emphasized text?

How about some <em>emphasized text</em>?

How about some Headings?

The heading above is the h3 tag.

<h3>How about some Headings?</h3>

I'm the h4 heading!

<h4>I'm the h4 heading!</h4>

Alright, now that you know the headings, lets move on.

Lists

You can use both the ordered and unordered list tags.

• I'm part of an unordered list!
• Good for making quick points about something
• And much much more!

<ul>
  <li>I'm part of an unordered list!</li>
  <li>Good for making quick points about something</li>
  <li>And much much more!</li>
</ul>

Now let's try the ordered list.

1. Everything will automatically be numbered.
2. Useful for tutorials
3. And other step by step instructions

<ol>
  <li>Everything will automatically be numbered.</li>
  <li>Useful for tutorials</li>
  <li>And other step by step instructions</li>
</ol>

Highlighting Syntax Code

If you are looking to show the code you used, here are the available options.

<html-code>
Put your XHTML code here!
</html-code>

<css-code>
Insert CSS Code here
</css-code>

<javascript-code>
Got some javascript code?
</javascript-code>

<mysql-code>
What about MySQL code?
</mysql-code>

<php-code>
How about some PHP code?
</php-code>

<asp-code>
Even ASP code!
</asp-code>

<actionscript-code>
Insert actionscript code here.
</actionscript-code>

<actionscript3-code>
Please use this for actionscript 3 code.
</actionscript3-code>

<apache-code>
Put Apache server code here.
</apache-code>

<python-code>
Python code goes here.
</python-code>

<ruby-code>
Insert Ruby code here.
</ruby-code>

<sql-code>
SQL code goes here!
</sql-code>

<xml-code>
Got some XML code?
</xml-code>

Using Lightbox functions

To enrich the user experience, we allow certain lightbox functions. These can be particularly useful when showcasing a certain image or website in your article or tutorial.

Image links with rel="lightbox" in the 'a' tag will appear when clicked on.
Click me!

<a href="http://designmess.com/custom-theme/sample-image.jpg" rel="lightbox">Click me!</a>

Links to HTML content with rel="lightframe" will also work.
Check out our friends at Firefox!

<a href="http://firefox.com" rel="lightframe">Check out our friends at Firefox!</a>

Other Styles

Looking to spruce up your post even more? Using these tags will really highlight your information and grab the reader's attention.

Do you have some information to highlight? Use the following code below.

The block and its content will be floated to the left.

<div class="info-block-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum velit et orci suscipit id venenatis elit molestie. Mauris ullamcorper, mauris eget volutpat adipiscing, tellus tortor feugiat quam, eget feugiat dui lorem ut augue. In mollis lacinia magna at vehicula.
</div>

Unlike the left info block, this block and its contents will be floated to the right of the text. Also shown is the use of a heading inside the block. We allow the use of the h4 heading tag inside these blocks.

<div class="info-block-right">
<h4>This is heading</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum velit et orci suscipit id venenatis elit molestie. Mauris ullamcorper, mauris eget volutpat adipiscing, tellus tortor feugiat quam, eget feugiat dui lorem ut augue. In mollis lacinia magna at vehicula.
</div>

Need to highlight an excerpt or a quote? Use the quote-left and quote-right tags.

The quote inside this tag will be floated to the left of the content.

<div class="quote-left">
I have a dream...
</div>

Once again, unlike the quote-left tag, the quote in here will be floated to the right of the content.

<div class="quote-right">
...That one day IE will be forever banned.
</div>

Finally, if you have something important to say, or if this is a very important step, you can use the notice tag.

<div class="notice">
I have something important to say.  I just forgot what it was...
</div>

Some final tips

While styling your posts is fun and helps grab the reader's attention, in the end, its the content that matters. If you create interesting and original content; and combine that with proper styling, then you create something that is a great read.