*** This is my practice website to learn and practice HTML, using Microsoft Step By Step book, by Faithe Wempen. ***
| 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 |
| <del> </del> | ||
| Underline | <ins> </ins> |
| 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. |
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.
| 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. |
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 |
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">
Relative size, using a percentage (50% is half the base size) or an em (2em is twice the base size):
ul {font-size: 75%}