Editors »Styling Individual Posts and Pages
- Getting to know your Text Editor
- Preformatted text and blockquotes in HTML
- Adding extra line breaks
- Customizing appearance with the style attribute
- Changing the default font size and color
- Splitting your content in columns
- Additional tips
When you’re working on your WordPress.com site, sometimes you might want to do more tweaking of your post or page layout than you can do with the toolbar buttons in the Visual Editor.
That’s where the power of the Text Editor comes in! This article provides a few easy-to-understand tips for how to format your posts by using simple HTML in your Text Editor.
Getting to know your Text Editor
To get started, go to your blog’s Dashboard and edit any post or page — try this first with a post you already wrote, so you can see what the HTML looks like. Click on the Text tab above the editing area (next to the Visual Editor tab). Just make sure you switch to a draft post before you start experimenting.
In the Text editor, everything is text – a link is text, a quote is text, even an image is text. But there are two kinds of text here. Some of the text is the actual content of the post you wrote, but some looks different. This “different” text is the HTML code.
It’s easy to tell the two apart: HTML code always starts and ends with angled brackets,
>. Everything inside angled brackets are HTML tags. Tags are predefined HTML commands that specify how your post will look and behave. To add a link, for instance, we use the
<a> tag (the a is short for anchor). To emphasize a section of text, we use the
<em> tag, which is short for emphasis.
To open an new tag, you simply type the tag you want to use just before the text you wish to change in some way:
<em>. When you want to end that effect, you insert a closing tag, which is the same tag but with a slash:
If we translate the above HTML tags above to literal commands in plain English, they mean “start applying emphasis (italics) here” and then “stop the emphasis here.” HTML is a set of rules and shortcuts that make it relatively simple for people to write commands like these and really simple for computers to understand them.
Preformatted text and blockquotes in HTML
To define a section of Preformatted text, we use the
For example, take the following poem:
AH, broken is the golden bowl! The spirit flown forever! Let the bell toll! — A saintly soul Glides down the Stygian river! And let the burial rite be read — The funeral song be sung — A dirge for the most lovely dead That ever died so young! And, Guy De Vere, Hast thou no tear? Weep now or nevermore! See, on yon drear And rigid bier, Low lies thy love Lenore!
To achieve this formatting effect, you’d use the following code:
</pre> <blockquote> <pre style="font-size: 16px;">AH, broken is the golden bowl! The spirit flown forever! Let the bell toll! — A saintly soul Glides down the Stygian river! And let the burial rite be read — The funeral song be sung — A dirge for the most lovely dead That ever died so young! And, Guy De Vere, Hast thou no tear? Weep now or nevermore! See, on yon drear And rigid bier, Low lies thy love Lenore!</pre> </blockquote> <pre>
Notice that the opening and closing
<pre> tags surround the whole section. This is the same thing that would happen if you selected this text in the Visual Editor and set the Preformatted style — behind the scenes, the Visual Editor adds the
<pre> HTML tags.
The light grey box that sets off the poem is created by a
<blockquote> tag, which can also be done from the Visual Editor using the Blockquote button.
Adding extra line breaks
The Visual Editor leaves one blank line between each paragraph. Sometimes, however, you want more space between your paragraphs than that. So, you hit enter five times, have a nice long gap in your text when you preview the post, publish and…the spaces are all gone!
This is because the HTML for those extra spaces (added behind the scenes when you pressed Return) has been stripped out by the Editor.
To force the Editor to keep those spaces, you can add the following code in the Text Editor:
You’d want to add that as many times as you want blank lines, so if you want three blank lines between two paragraphs, you’d add the following in your Text Editor:
This is HTML for a non-breaking space. But a word of warning! If, after adding those spaces, you click back to the Visual editor before publishing or updating your post, those spaces will be stripped out again.
If you have trouble getting those spaces to stay, you can also use a bit of inline CSS to add extra line breaks.
To do this, you’ll want to wrap your paragraph in the following code:
<p style="padding-top:14px;">Your paragraph of text here.</p>
This tells the editor to leave 14 pixels of space above your paragraph. You can increase the number for more space or decrease it for less. You can also use “padding-bottom” rather than “padding-top” to add extra space below a paragraph instead of above it. This looks a bit more complicated than the non-breaking space code discussed above, but it gives you more flexibility and control.
Customizing appearance with the style attribute
Now that we’ve gotten the basics down, we can get fancy with the style attribute.
First, let’s try changing the font you get when you use the Preformatted style (or, more to the point, the
<pre> tag). As we mentioned before, everything in HTML is text – so changing fonts is also done by typing plain text in the Text Editor. Specifically, it is done by adding an attribute to the
HTML tags are like predefined sets of instructions. For example, one instruction given by the the
<pre> tag is “preserve all extra spaces inside this tag.” Another is “show text in a weird font.” But you don’t have to settle for the instructions the tag gives by default. Attributes let you change the default instructions, or add new ones of your own.
An attribute lives inside the start tag. For example, this start tag includes an attribute that makes it use the Arial font:
pre style="font-family:Arial">Your paragraph of text here.</pre>
This tag also increases the font size:
pre style="font-family:Arial; font-size: large;">Your paragraph of text here.</pre>
There are all kinds of formatting changes you can make using various style attributes: you can set indentation, control letter and word spacing, add or decrease line height, and more, and you can do all this to a pixel-perfect degree of accuracy.
For example, the following code includes attributes that ensure that the
<blockquote> tag will have a light blue background and show italicized text:
blockquote style="background-color:lightblue; font-style:italic;">Look at me, I’m in a blue blockquote!
When applied to the text, you get this:
Look at me, I’m in a blue blockquote!
Changing the default font size and color
You can use the
<span> tag to modify the font and font color of text in an individual post or page.
For example, to change the font to Georgia, size 13, you’d use the following code:
span style="font-family:Georgia; font-size:13px;">This is the Georgia font, size 13px.</span>
Your paragraph would then look like this:
This is the Georgia font, size 13px.
For Times New Roman, size 16px, you’d use the following:
span style="font-family: 'Times; font-size:16px;">This is Times New Roman, size 16px.</span>
This is the Tahoma font, size x-small:
span style="font-family:<">Tahoma; font-size:x-small;">This is the Tahoma font, size x-small.
This is the Georgia font, in pink:
span style="font-family:Georgia; color: #ff00ff;">This is the Georgia font, in pink.
Here I am going to cite my work1 and superscript this text. Here I’m going to talk about water (H2O) and subscript the number.
Here I am going to cite my work<sup>1</sup> and <sup>superscript</sup> this text. Here I'm going to talk about water (H<sub>2</sub>O) and <sub>subscript</sub> the number.
Splitting your content in columns
You can use the
<div> tag along with the
style attribute to create columns in an individual post or page.
For example, to split your content in two columns, you would use the following code:
<div style="width:40%;padding:0 10px 0 0;float:left;"> Your content for your column #1 Your content for your column #1 Your content for your column #1</div> <div style="width:40%;padding:0 10px 0 0;float:right;"> Your content for your column #2 Your content for your column #2 Your content for your column #2 </div> <div style="clear:both;"></div>
This will create something like this:
Your content for your column #1
Your content for your column #1
Your content for your column #2
Your content for your column #2
You can play with the values for
padding to tweak your columns. This allows you to adjust the spacing between them, create columns of different widths, and make sure more columns fit your post or page in case you add them.
For example, for three columns, you would use the following code:
<div style="width:30%;padding:0 10px 0 0;float:left;"> Your content for your column #1 Your content for your column #1 Your content for your column #1</div> <div style="width:30%;padding:0 10px 0 0;float:left;"> Your content for your column #2 Your content for your column #2 Your content for your column #2 </div> <div style="width:30%;padding:0 10px 0 0;float:right;"> Your content for your column #3 Your content for your column #3 Your content for your column #3 </div> <div style=”clear:both;”></div>
Note how we changed the
width attribute to 30% to make sure we could fit another column.
- When you write HTML, you must make sure the code is well-formed and all open tags are closed. For example, every <span> tag must have a </span> tag.
- Make sure you are using regular quotes (” “) and not smart quotes (” “).
- Remember, you can change some aspects of the fonts using the visual editor icons including headings, paragraphs, indentation, and alignment.
- To make changes across your entire blog (colors, fonts, etc.) rather than to individual posts or pages only, you can purchase the Custom Design upgrade, which costs $30.00 per blog, per year. With Custom Design, you can easily change your blogs fonts and colors, as well as modify your theme’s CSS. If you are new to CSS, check out our CSS basics page for help getting started.
For more help with working with HTML, try these sites: