*** This is my practice website to learn and practice HTML, using Microsoft Step By Step book, by Faithe Wempen. ***

Notes about text formatting

Two-sided tags

Format Tag Notes
Bold <b> </b> Equivalent: <strong> </strong>
Italic <i> </i> Equivalent: <em> </em>
Superscript <sup> </sup> Used in math equations: X2, footnote numbers1, and ordinal numbers: 3rd
Subscript <sub> <sub> Used in chemical formulas: H2O
Monospace <tt> </tt> Equivalents: <kbd> </kbd>, <code> </code>, <samp> </samp>
Preformatted <pre> </pre> To display text in monospace, preserving all spaces and line breaks
Block quotation <blockquote> </blockquote> Indents text enclosed from main body
Quotation <q> </q> Inserts quotation marks around the text enclosed
Strikethrough <del> </del>
Underline <ins> </ins>

Style Attributes

Format Tag Notes
Text color style="color: blue" Replace "blue" by any other valid color
Background color style="background-color: aqua" Replace "aqua" by any other valid color
Background image style="background-image: url(Banner.jpg)" Replace "Banner.jpg" by any other image.
Background repeat style="background-image: url(Seashell.jpg); background-repeat: repeat-x" Possible arguments: repeat-x (repeat horizontally), repeat-y (repeat vertically), no-repeat.
Fixed background style="background-image: url(Banner.jpg); background-attachment: fixed" To prevent the background image from scrolling.
Bold style="font-weight: bold"
Italic style="font-style: italic"
Overline style="text-decoration: overline"
Underline style="text-decoration: underline"
Line-through style="text-decoration: line-through"
Blink style="text-decoration: blink" Use sparingly, if at all; some browsers do not support this value.
None style="text-decoration: none" Removes all inherited decoration.
Letter Spacing style="letter-spacing: 4px" Default is 0; + numbers increase space; - numbers decrease space.
Word Spacing style="word-spacing: 6px" Default is 0; + numbers increase space; - numbers decrease space.

Inline span

Add a <span> </span> tag with arguments around the text to format.
Example: This word is <span style="color: blue">blue</span>.
Result: This word is blue.

Formatting paragraphs

Format Tag Notes
First-line indent style="text-indent: 20px"
Padding style="padding: 20px" Space added between text and border
Margin style="margin: 20px" Space added outside border
Vertical space style="line-height: 150%"
Horizontal alignment style="text-align: center" Possible arguments: left, center, right, justify.
Specific side style="padding-left: 10px" Possible arguments: top, bottom, left, right.
Percentage style="padding: 10%" Used instead of px for margins, padding, vertical space.


Font family

Style section: p {font-family: "Arial", "Helvetica", sans-serif}
Individual tag: <p style="font-family: Arial, Helvetica, sans-serif">

Common font families (basic fonts that don't need quotation marks are highlighted in tan):

1) Arial Black Helvetica Bold
2) Arial Helvetica sans-serif
3) Verdana Geneva Arial Helvetica sans-serif
4) Times New Roman Times serif
5) Courier New Courier monospace
6) Georgia Times New Roman Times serif
7) Zapf-Chancery cursive
8) Western fantasy

Font size

Absolute size, using a number and a unit of measurement (most common is px, average size is 10px):
p {font-size: 13px}

Relative size, using a relational description:
<li style="font-size: x-large">

  1. xx-small
  2. x-small
  3. small
  4. medium (default)
  5. large
  6. x-large
  7. xx-large

Relative size, using a percentage (50% is half the base size) or an em (2em is twice the base size):
ul {font-size: 75%}

Back to the top