CSS notes 1: Styles
syllabus | schedule | assignments | Web Resources | ARTC courses
[Intro]     [Tags]     [CSSStyles]     [Lists]     [Links]     [ImageTypes]     [Optimization]    [GlobalCSS]     [CSSBackgrounds]
[Tables]     [Slices]     [IR Rollovers]     [Animated GIFs]     [JS Rollovers]     [CSS Margins]     [Windows]     [Video]     [Metatags]     [Imagemaps]     [FormInput]     [FormAtttributes]    [AdvancedForms]    [WhatisJavaScript]    [Windows2]    [Windows3]    [BrowserInfo]    [StatusBar]    [Alerts]    [Randomness]    [Frames]    [iFrames]    [Frames2]   
CSS = Cascading Style Sheets

A feature that gives both web site developers and users more control over how HTML pages are displayed on screen. With CSS, designers can create style sheets that define how different elements, such as headers and links, appear. These style sheets can then be applied to any Web page. <ref: google>

CSS can be written and utilized in 2 ways:

1) locally, by applying the STYLE attribute to specific tags. -OR-
2) globally, by defining classes either in the HEAD of the HTML doc or linking to an external CSS file.

AT this point, we will use the STYLE attribute.

 

Manipulating Fonts with CSS - <FONT>

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>

 

Lesson 3

1) Within the BODY of your index file, below the horizontal rule added from Lesson 2, experiment with manipulating text. Content of text is not important. Make sure you vary the font FACE, SIZE and COLOR.