Code

Text

Examples

<strong>TEXT</strong> <em>TEXT</em>

This text is bold. This text is italicized.

Surround text with <strong></strong> tags to make it bold, or with <em></em> to italicize it. Regular text goes here.

<blockquote>TEXT</blockquote>
This text is in a blockquote. Surround text with <blockquote></blockquote> tags to indent it and set it apart from the rest of your text. Useful for quoting longer sections of other pages.

<h1>TEXT</h1> <h2>TEXT</h2> <h3>TEXT</h3> <h4>TEXT</h4> <h5>TEXT</h5> <h6>TEXT</h6>

Header 1
Header 3
Header 6

Header tags are used for various levels of headers, titles and subtitles on a page. The size choices are 1 (largest) through 6 (smallest).
Links

<a href='http://URL'>TEXT</a>

This is a link to Blogger.

The text between the <a> tags will be what your reader sees and clicks on. The URL indicated by href= is the address they will be taken to. For more information on links, please see How can I do more with links?

<a href='mailto:ADDRESS'>TEXT</a>

This is an email link.

Email links work like webpage links. Just replace http:// with mailto: and replace the URL with an email address.

Lists

<ol> <li>TEXT</li> </ol> <ul> <li>TEXT</li> </ul>

1. First list item. 2. Second list item.

y y

First list item. Second list item.

You can create ordered (numbered) lists with the <ol> tags and unordered (bulleted) lists with the <ul> tags. In either one, individual list items are contained in <li></li> tags and get numbered or bulleted automatically. You can also nest lists, by including the complete code for a second list within the <li></li> tags for the first list.
Dividers

<p>TEXT</p> <p>TEXT</p>
Paragraphs are blocks of text separated by blank lines.

First paragraph. Second paragraph

TEXT <br /> TEXT

First line. Second line.

Break tags start a new line where ever you enter them. Note that it is just a single tag, so it doesn't have to surround any text. First line.

TEXT <hr /> TEXT

Second line. Horizontal lines can be used to separate anything you want. Like break tags, this are single items that don't surround text.

Colors, Fonts, Alignment and anything else you can think of...

You can adjust the precise appearance and positioning of all the elements listed above and more, through the magic of CSS. See: What else can I do with CSS?

What can I do with CSS?

You can change almost any aspect of your blog's appearance just by changing the style sheet in your template. Some of the most common things to do are listed here. For more in-depth tutorials and examples, please see W3 Schools CSS Examples and The W3C Introduction to CSS. Our default templates have all the CSS information towards the top, between <style></style> tags. You'll see a bunch of lines there that look like this:

The highlighted line shows the style that is applied to every <h3> tag in your blog. What we're going to describe here are some options for how to style it. Any of the pieces of code below can be inserted between the { curly brackets } in the style sheet.

Code
Colors

Examples

color:blue;

This text is blue. This has a yellow background .

background:yellow;

You can insert the names of many common colors here (e.g. red, green, yellow) or you can use hexadecimal codes for a

greater range of colors (e.g. #0033AA). For more information on color, please see the Web Color Reference.
Borders

border:solid 1px red;

This has a red border.

A border can be solid, dotted or dashed. The width here is specified in pixels (px). Colors can be names or hexadecimal codes. To only do a border on one side, use border-top, borderbottom, border-right, or border-left.
Fonts

fontThis is in a family:"Times New Roman",Serif; serif font.

This is in a font-family:Verdana,Sans-Serif; sans-serif font. You can specify a list of font choices. If the first one isn't available on your reader's computer, the next will be used, and so on. Indicating "Serif" will use any available serif font.

font-size:24px;

This text is 24 pixels high.

The units of size can be pixels (px), points (pt), inches (in) or percent of the default size (%).

font-weight:bold;
Choices are bold and normal.

This text is bold.

text-decoration:underline;

This text is underlined.

The text decoration can be set to none, underline, overline, or line-through. This is most commonly used to remove the underlining on links. This text is right aligned.

text-align:right;

The alignment can be set to left, right, or justify.

Margins and Padding

margin:15px;

This has a 15px margin all around. This has 15px of padding all around.

padding:15px;

Margin and padding both specify the amount of space around something. The difference is that a margin is outside the border and padding is inside. (The border here is just for illustration.) As with the border, you can specify one side at time with margin-left, padding-top, etc. You can also set all at once with margin:1px 2px 3px 4px; where the order is top, right, bottom, left.

Notes: You can also use inline styles, if you want to do one-time formatting for a specific piece of text in a post. Here is the format to use: <span style="color:red;">This text will be red.</span>