Tealmermaid Designs

web design, coding, and SEO tips and tricks

Codes for text display

Share:

Display text neatly


When you start to create your first web page, you should keep things simple. Don't make yellow bolded blocks of centered text. It looks bad, and you will end up changing it as soon as you come to your senses about how it displays (usually about an hour after you code that piece of text). Start off very simply with text formatting. Remember: less is more when it comes to web design.






Headers

Headers are the "titles" used on a page. The larger a header is, the more important it is. There are six sizes of headers.

<h1>This is the biggest header: h1</h1>

This is the biggest header: h1

<h2>This is the h2 header</h2>

This is the h2 header

<h3>This is the h3 header</h3>

This is the h3 header

<h4>This is the h4 header</h4>

This is the h4 header

<h5>This is the h5 header</h5>

This is the h5 header

<h6>This is the h6 header</h6>

This is the h6 header

Span

The CSS span tag is used to change a text display. You can alter such things as color and size with span.

<span style="color: purple;">This is your text</span>

This is your text

Text weights

Your text can be formatted in both HTML and CSS.

In HTML:

<b>bold text</b>

bold text

<i>italic text</i>

italic text

<u>underlined text</u>

underlined text

<strike>strikeout text</strike>

strikeout text

Alternately, you can code this entirely in CSS: font-weight: bold, font-style: italic, text-decoration: underline;, and text-decoration: line-through; (same as the HTML "strike").

You can also specify font names in CSS with font-family. Try to keep to web-safe fonts if you do this.

Display this text in Times New Roman.

If you are writing a coding tutorial, the HTML code tag can be used to indicate the code in your text.

<code>Hello, world</code>

Hello, world

Text colors

Set text color with the CSS property color. Set paragraph color with the CSS property background-color. The colors may be specified by hexadecimal numbers or names.

<p style="color: darkgreen; background-color: #eef2a8;">Dark Green text on a yellow background</p>

displays as:

Dark Green text on a Yellow background

Text size

Set text size with the CSS property font-size.

<p style="font-size: 20px;">20px text</p>

20px text

Margins and padding

Margins are the white space around paragraphs. You can set all margins to display as the same size (where "px" = "pixels"):

<p style="margin: 15px;">This is your text</p>

This is your text

You can also set each margin to be a different size:

<p style="margin-top: 6px; margin-left: 20px;">This is your text</p>

This is your text

Padding is the space between the text and the edge of the paragraph. It is controlled the same way as the margins.

Text alignment

Text can be added with the CSS properties left, right, center, and justify.

<p align=left>Text to the left</p>

Text to the left

<p align=right>Text to the right</p>

Text to the right

<p align=center>Center that text</p>

Center that text

<p align=justify>Let's make a giant block of text so there is plenty of text to justify on both sides of the paragraph that is being created</p>

Let's make a giant block of text so there is plenty of text to justify on both sides of the paragraph that is being created. Then you will be able to see clearly how "justify" works with a large block of text.

Blockquote

An HTML code that is not used often, but very helpful when quoting someone on your site. It creates a block of text with margins to the left and right of the text.

<blockquote>Let's make another giant block of text so there is plenty of text on both sides of the paragraph that is being created to see how "blockquote" works. Then you will be able to see clearly how this can display with a large block of text.</blockquote>

Let's make another giant block of text so there is plenty of text on both sides of the paragraph that is being created to see how "blockquote" works. Then you will be able to see clearly how this can display with a large block of text.

Borders

The code border puts a border around your text.

<p style="border: solid;">Solid border</p>

Solid border

<p style="border: dotted;">Dotted border</p>

Dotted border

<p style="border: dashed;">Dashed border</p>

Dashed border

<p style="border: double;">Double border</p>

Double border

<p style="border: inset;">Inset border</p>

Inset border

<p style="border: outset;">Outset border</p>

Outset border

<p style="border: groove;">Groove border</p>

Groove border

<p style="border: ridge;">Ridge border</p>

Ridge border

You can also add properties for both size (in pixels) and color to your borders.

Ordered and unordered lists

These are used to make bullet points on a page. An ordered list uses numbers as bullet points, while an unordered list simply displays the bullets. Bullet points are enclosed in the tag <ul> (and closing tag </ul>) for unordered lists and <ol> (and closing tag </ol>).

<ol>
<li>This is an ordered list bullet point</li>
<li>This is another bullet point</li>
</ol>


  1. This is an ordered list bullet point
  2. This is another bullet point

<ul>
<li>This is an unordered list bullet point</li>
<li>This is another bullet point</li>
</ul>

There are three designs to choose from for the bullet point on an unordered list which are coded as part of the li tag in the form <li type="shape">:

type=disc (a filled circle)

type=circle (an unfilled circle)

type=square (a filled square)