font[ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
font-stylenormal- This is sample text of this property
italic- This is sample text of this property
oblique- This is sample text of this property
inherit- This is sample text of this property
font-variantnormal- This is sample text of this property
small-caps- This is sample text of this property
inherit- This is sample text of this property
font-weightnormal- Standard level of bold (i.e. none). This value is the same as 400
This is sample text of this property bold- Displays the text in a bold appearance
This is sample text of this property bolder- This value will make the font bolder than its default, or inherited font-weight.
So if the font-weight is normal, setting it to
bolderwill make it appear as though you had set it tobold. If you are on the maximum boldness, it will simply use that weight.
This is sample text of this property lighter- This is essentially the opposite of above - it will use a lighter weight than its inherited weight.
This is sample text of this property 100to900- Values of 100 to 900 represent light to heavy weights:
This is sample text of this property (100)
This is sample text of this property (500)
This is sample text of this property (900) inherit- Uses the same font-weight as its parent
This is sample text of this property
font-size- Absolute Sizes:
xx-small,x-small,small,medium,large,x-largeorxx-large- These sizes may vary from browser to browser, but medium is quite often rendered as 12pt font.
In CSS 1 the difference between font these values was 1.5pt, but this proved too big,
and so 1.2pt was the suggested standard in CSS 2.
This is sample text of this property (xx-small)
This is sample text of this property (small)
This is sample text of this property (large)
- Relative Sizes:
largerorsmaller- These keywords make the font size smaller of larger than its parent's font size.
For example if a parent element had a font size of 12pt and a child element specified
its font size to be
largerthe child's font size may for example be 14.2pt.
This is sample text of this property (smaller)
This is sample text of this property (larger)
- Lengths or Percentages - Generally it is good to
use percentages or relative sizes such as
emso that the user can set the font size larger if they have impaired vision.
line-height<div>)
it specifies the line-height for all of its inline child elements.
Values may either be normal, inherit,
length or percentage or any decimal number.
When using a number the UA multiplies this by the font size.
Using normal should be the same as specifying a number of between
1 and 1.2 (depending of the UA).This is sample text of this property (normal)
This is sample text of this property (250%)
This is sample text of this property (500%)
font-familyp { font-family: Verdana, Tahoma, sans-serif; }| Font-Family: | Description: | Example fonts: |
|---|---|---|
| serif | Serif fonts have flared edges and tend to be easy to read. Most news-papers tend to use serif fonts. | Times New Roman |
| sans-serif | Sans-serif fonts are similar to serif fonts except that they do not have flared edges. They are usually clean/tasteful and rounded looking. | Tahoma, Verdana, Arial |
| cursive | Cursive fonts tend to have a hand-writing effect due to their joining strokes. | Zapf-Chancery |
| fantasy | Fantasy fonts are highly decorated compared to other font-families. | Studz |
| monospace | Monospaced fonts are those that each character/symbol are of equal width. They are usually used for samples of computer programming code or similar. They are useful when you need to space text out evenly, especially over several lines. | Courier, Courier New |
text-align<div>)
as it will only center the text inside the element (except for a bug in Internet Explorer).
Instead you should consider using the margin property.
Possible property values for text-align include:
left- Aligns text to the left
This is sample text of this property right- Aligns text to the right
This is sample text of this property center- Aligns text centre
This is sample text of this property justify- Justifies the text (spreads it evenly across the width of the element)
This is sample text of this property
text-decorationunderline keyword/value. Possible property values include:
none- No text decoration. If you use this value, you may not
use any of the other possible values outlined below.
This is sample text of this property underline- Underlines the text
This is sample text of this property overline- Adds a line above the text
This is sample text of this property line-through- Adds a strike-thru effect to the text (same as using the
<strike>or<s>tags)
This is sample text of this property blink- Makes the text repeatedly blink on and off.†
This is sample text of this property
text-indent
entities, which may not work properly anyway if the browser window is too small.
Values may either be units or inherit
in which case the value will be the same as the element's parent's property.
For example to indent all all paragraphs by 3 ems you could write:
p { text-indent: 3em; }This is sample text of this property
text-transformuppercase
would make all selected text uppercase, regardless of its original case.
Possible property values include:
capitalize- Makes the first letter of each word capitalised
This is sample text of this property uppercase- Turns all of the text to uppercase
This is sample text of this property lowercase- Turns all of the text to lowercase
This is sample text of this property none- No text transformation (i.e. the text is left the same as the case it was typed in).
