| Don't forget: If using CSS rules within the open and close <Style> tags or in an external style sheet, use the curly braces " { } " to state the rule. Do Not use the curly braces when using inline styles. | ||
Property |
Description |
Style |
| font | Important Note This property is not fully supported and is highly sensitive to the order of each attributes. Different browsers will give different results and may not even render the style. This is a kind of shorthand for writing several font properties with one style rule. |
P { font: bold 24pt Comic Sans MS } An example of a combined font attribute style. |
| font-family | This is equivalent to the "FACE" attribute of the <FONT> tag. Remember that fonts are read in descending order, and must be separated by commas. If the font name has any spaces, use quotes to separate the font list (such as "Century Gothic"). If you use an inline style and need to add a font such as the example above, then you can use a single quote to separate the font list. Values: A font family or Cursive, Fantasy, Monospace, San-Serif, Serif. |
BODY { font-family: Impact, Times, Helvetica } This is Impact font . P { font-family: "Comic Sans MS", Impact, Helvetica } This is Comic Sans MS font. <DIV STYLE="font-family: 'Comic Sans MS', Impact, Helvetica">My text line.</DIV> |
| font-size | Use this property to change either the physical or relative size of a font. By relative, I mean in relation to the base font size. An important feature of this style is that you can specify the size according to height by using a css standard unit of measurement. DO NOT put a space before the unit. Wrong: 18 pt Correct: 18pt Values: XX-Large, X-Large, Large, Medium, Small, X-Small, XX-Small. Larger, or Smaller A % value such as 200% A specific unit value: pt equals point, px equals pixel, in equals inch, cm equals centimeter, mm equals millimeter, pc equals pica. |
BODY { font-size: 12pt } This is 12pt. P {font-size: 18pt} This is 18 pt font. P {font-size: smaller} This is smaller text. P {font-size: 300%} This is 300%. |
| font-style | This property is not widely used since regular Html tags do the job easier. It is used to specify a Normal, Italic, and Oblique style. Oblique is used to create italic text for fonts that don't understand the term "Italic" and can be used in the example to the right. (Oblique not supported by Netscape) |
<I STYLE="font-style: oblique">This is oblique text.<I> This is oblique text. |
| font-weight | This property is used to select the thickness of a font. Values can include a numeric value as well as some keywords. Normal font weight is the same as 400, while a Bold font is the same as 700. Values: 100 - 900 with 100 being the lightest. Keyword Values: Normal, Bold, Bolder, Lighter. Note: While the use of the Html tag <B> is easier to use, the font-weight property is good to use when using the other values. |
<SPAN STYLE="font-weight: bold">Bold text</SPAN> Bold text B { font-weight: 900 } This font has a weight of 900. |
| Page 1 of 1 | ||