Formatting Text in HTML

<div>Display the word <span style='font-weight:bold'>bold</span> in bold</div>

Display the word bold in bold.

font-family: Broadway, Arial (a comma separated list of possible fonts- defaults to first one)

font

font-style: normal/italic

italic

text-align: left/center/right

text alignment

font-size: 1em (any size in pt/px (absolute) or em(relative *preferred- 1em is standard))

text size

<div>Make the word <span style='font-size:16px'>big</span> big and the word <span style='font-size:8px'>small</span> small.</div>

Make the word big big and the word small small.

<div> Make the word <span style='font-family:Trebuchet, sans-serif'>cool</span> appear in a cool font.</div>

Make the word cool appear in a cool font. (Trebuchet then sans-serif)

<div>Make the word <span style='background-color:yellow'>highlight</span> look like it is highlighted.</div>

Make the word highlight look like it is highlighted.

<div>Make the word <span style='color:red; text-decoration:underline'>this</span> appear red and underlined.</div>

Make the word this appear red and underlined.

text styles

any html tags that allow text inside of them, will allow for the style attribute to be present, including body, div, h1, and span; once the style tag has been placed, inline text formatting can be rendered using the following CSS options

font-weight: normal/bold

bold

<span>...</span>

non-formatted tags and place no pre-formatting on their contents, like div tags; unlike a div tag, a this tag does not force a line break and is a not a block level container; this means that they must be written inside div or header tags; useful for formatting pieces of text, such as underlining a book title and bolding or coloring words for emphasis; using this tag for formatting requires the use of the style attribute and some basic CSS

header tags

these tags are used to allow developers consistency in the size and design of their headings; these automatically bold their content and provide consistent sizing there are six different levels that can be used (from largest to smallest): <h1>, <h2>, <h3>, <h4>, <h5>, <h6>; each should work with a closing tag as well

text-decoration: none/underline/overline/line-through

underline

<div>...</div>

used to denote a page division; division may be different sections or even paragraphs; do not have any type of pre-formatting defined (like the bold in a header); however, they do force a line break at the end; they work in pairs