Lesson 2
Formatting Text, Color, Links
Font-Family
By now most of us know that if you design a web page the font on that page
will not be viewed by someone who has not got it installed in their
computer, instead their default font will be viewed. You will now see a few
ways to change this. First of all you could specify more than one font for
the browser to use, or you can specify a generic font that would be
available on all computers. Personally, I have tried to use Arial in all of
my pages, but since my editor had a default of Times New Roman, I had to
change the default font to Arial for my editor (FrontPage)
Examples:
P {font-family: "Arial"} defines only one font for the <P> tag
P {font-family: "Arial", "Verdana", "Helvetica"} defines several fonts for
the <P> tag
Downloading Fonts on a Page
You can actually provide the font you are using on your page by embedding it
into your page and the user will download it to their computer. The font
will have to be converted to a special format, IE requires it to be
converted to the .eot format. You can convert your fonts to the .eot format
by using a special program called WEFT. You can download this program from
Microsoft
and they even have and
MSN Group for support. The code you will need to add to your page for
downloaded the embedded font is:
@font-face {font-family: "Black Rose"; src: url(blackrose.eot)}
See a sample of a page that was created to embed the font into the page.
Italic Formatting
When formatting Italic Fonts using the Italic format there needs to be a
version of that font in Italic, but if there is not you have the option of
using oblique which the computer generates a version of italic with the font
specified. The codes for these are:
P {font-style: italic}
P {font-style: oblique}
Bold Face Formatting
You can apply different levels of bold face formats as shown below:
P {font-weight: bold} - regular bold face
P {font-weight: bolder} - heavier bold face
P {font-weight: lighter} - lighter bold face
You can also control the level of bold face formatting by using a number
from 100 to 900, 700 represents bold face. The bold formatting also varies
from font to font so you will need to experiment with the formatting to
achieve the formatting that is right for you.
Setting Fonts to Normal
If you want to remove the bold face formatting and italics from your text
then you can use the following:
H1 {font weight: normal} will remove the bold face formatting from your
header 1
or
<H1> heading. P {font-style: normal} will remove the italic from your font.
Underlining Text, Links, Strike-through Text
Add Underlining to text: P {text-decoration: underline}
Add overlining to text: P {text-decoration: overline}
Remove underlining from a link: A:link {text-decoration: none}
Remove underlining from an active link:
A:active {text-decoration: none}
Remove underlining from a visited link:
A:visited {text-decoration: none}
Remove underlining when a user hovers their mouse over the link: A:hover
{text-decoration: none}
Font Size
CSS allows you to change the font size in all of your pages in a web at once
where in HTML you would have to format each paragraph on every page. You can
actually change the font-size by pixels or points. Using points you can
change the size from 1pt up as high as you want to go but the standard for
this is 8pt to 16pt anything else is too small or too big for easy viewing.
Using pixels the standard size is from 12px to 100px. Again anything smaller
or bigger would make it hard to read. The difference between the two is that
the point system is based upon the numbering system but the pixel system is
based upon the resolution of the monitor.
P {font-size: 16 pt} is the syntax for the font size in point
P {font-size: 16px} is the syntax for the font size in pixels
Line Height
You can define your paragraph height by either pixels or by percentage.
P {font-size: 20pt} is used to change the line space by point
P {font-size: .40} is used to changethe line space by percentage
Font Color
There are 16 predefined colors that you can specify by name when
choosing a font color, these colors are: aqua, black, blue, fuchsia, green,
gray, lime, maroon, navy, olive, purple, red, silver, teal, white and
yellow. When specifying a color you can either choose one of these or use
the hexidecimal numbers such as #008080 (my favorite)
H1 {color: teal} or H1 {color: #008080} is the syntax for the font color
Text's Background Color or Highlighting
You can change the background color or highlight your text by using the
following:
P {background: blue}
Link Colors
A link is affected in four different ways,
A:link - will change the appearance of a link that has not been visited
before, it is not being clicked or is not being hovered.
A:visited - will change the appearance of a link that has been visited
before
A:active - will change the appearance of a link during the time it is being
clicked
A:hover - will change the appearance of a link while it is being hovered
over
You change the color of the above links the same as with any other:
A.link {color: teal} or A.link {color: #008080}
A.visited {color: red} or A.visited {color: #ff0000}
A.active {color: blue} or A.active {color: #0000ff}
A.hover {color: silver} or A.active {color: #c0c0c0}
The sample page found here has used all of
the above formatting options. You can see how the page was written
here.
Reference Table
If you are interested in coding with CSS there are many guides out there
with reference manuals for CSS elements.
Builder.com is one
place with a Reference Table.
