65% off at FatCow!
iPage Hosting
1&1 Hosting $6.99/mo
Free Domain Name
If you Order Today!
Our CSS Style topics:
CSS Code Tutorial Chapters:
- Introduction
- Basics of CSS
- All About Selectors
- Background and Color
- Fonts and Text
- Links
- Lists
- Margin
- Padding
- Border
- Good CSS Design
- Resources
visit our other tutorials:
web design tutorial
html code tutorial
CSS Font and CSS Text Styles
You are probably already familiar with both the color: and background-color: properties from earlier chapters. The four common color formats are as follows:
- Name
- the 16 common VGA colors named in most browsers are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
- Hexadecimal
- format #xxxxxx ( #000000 - #FFFFFF )
- Red/Green/Blue Values
- (x, x, x) where each x is that colors value from 0 - 255
- Red/Green/Blue Values
- (x%, x%, x%) where each x is a value from 0.0% to 100.0%
Dave has a
New Course for your iPad!Download HTML and CSS Web Design Basics Right Now! Or Search for "Web Design Basics" in AppStore!
Hexadecimal is the most common format for color. It allows easy matching to graphics' colors, because all major graphics software support hexadecimal color.
The font-family property is equivalent to the face property in the <font> tag. If you use this property you need at least one font or font-type listed. It is recommended to have 2 or 3 different fonts, the last of which is a standard font type of one of the following:
- serif
- sans-serif
- cursive
- fantasy
- monospace
If you want all paragraphs to first try to use Times, and if Times is not on the system, use a serif if available, you could use:
p { font-family: Times, serif; }
(You'll commonly see this as p { font-family: 'Times New Roman', Times, serif; } because Macs and PCs name the Times font differently.)
The font-style property can use one of three values: normal, italic, or oblique.
The font-weight property can use one of four build in values: normal, bold, bolder, lighter.
It can also use a value in the range of 100 to 900, in increments of 100. (For a baseline, normal is defined as 400, and bold is defined as 700).
There is a font-variant property, which is merely either normal or small-caps.
The last individual font property is font-size. It can be relative to the text around it (smaller or larger), a set size in pt (e.g. 14pt) or em (e.g. 1.5em) or an absolute size by text description, from one of the following:
xx-small, x-small, small, medium, large, x-large, xx-large
The font also has a combination property called font, which is in this format:
[ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family
So if simply wanted a bold 12pt Serif, you could use:
font: bold 12pt serif;
bold 12pt serif
If you wanted it double-spaced, you could add the line-height:
font: bold 12pt/24pt serif;
this is a double-spaced
bold 12 pt serif
| < Ch. 4 part 2 | > continue to Ch. 5 part 2 |
The Original $3.15/mo. FatCow Plan - Unlimited Disk Space, Unlimited Transfer, Unlimited E-mails & Site building tools.
iPage Hosting
1&1 Hosting $6.99/mo
Free Domain Name If you Order Today!