Useful Resources
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses
Manipulating Fonts with CSS

Font color:
Ex: This is a sentence contained in a font tag. Code: <FONT style="color:#CC0000;">This is a sentence contained in a font tag.</FONT>

COLOR = #RRGGBB (hexidecimal equivalent)
You will have a larger range of colors to pick from by using the HEX #.
To find HEX # for a specific color, use the color picker in Photoshop--the HEX # number is listed at the bottom of the picker window.

Font size:
Ex: This is a sentence contained in a font tag.
Code: <font style="font-size:24px;">This is a sentence contained in a font tag.</font>

The options for the size tag are:

font-size:16px;
font-size:150%;
font-size:x-large;

Font family:
Ex: This is a sentence contained in a font tag.
Code: <font style="font-family:'Times New Roman', Times, serif;">This is a sentence contained in a font tag.</font>

Different Families: Arial, Helvetica, sans-serif Times New Roman, Times, serif Courier New, Courier, monospace

This attribute is telling the browser to: 1- Look for Times New Roman(family-name) in the user's system, or if that isn't available.. 2- Look for Times, or if that's not available.. 3- Look for a serif (generic-family), or if that's not available.. 4- Use their default system font..

Font weight: Ex: This is a sentence contained in a font tag. Code: <FONT style="font-weight:bold;">This is a sentence contained in a font tag.</FONT>

Font style: Ex: This is a sentence with italic in the font tag. Code: <FONT style="font-style:italic;">This is a sentence with italic in the font tag.</font>

To combine styles use a semi-colon between each style component: Ex: This is a sentence with lots of style attributes. Code: <font style="font-size:16px; color:#CC0000; font-weight:bold; ">This is a sentence with lots of style attributes.</font>

Other tags for manipulating fonts (without CSS)

<STRONG>BOLD / STRONG text </Strong>

<EM>Italicized / Emphasized text</EM>

<TT>&Typewriter (monospace) font</TT>

<U>Underline text</U> Be forwarned it can be confusing because links are also underlined.

<S>Strike</S>

Footnote1 uses the <sup> superscript: April 24<sup>th</sup>

Chemical names use subscript <sub>H2O</sub>

[BACK to RESOURCES]