Page is a not externally linkable
SuzyUK - 9:36 pm on Sep 12, 2004 (gmt 0)
2. Shorthand Properties continued.. Font Shorthand font { the individual properties are not seperated by commas (internal choices of font-families still need to be though), all parts are optional but if they are not declared they are still understood to be there and will take on the individual defaults instead. the 3 choices as seperated by Example: is the equivalent of: Example 2: is the equivalent of: Note: setting a font using a shorthand property later in the cascade will override more explicit settings from earlier on. e.g. the second example if used after the first will reset values (back to default) from the first even though they're not declared. If you only require to override one part of a setting the has been set using shorthand earlier in the cascade you should use the long hand Example: <p class="normal">this is now normal weight text</p> The p with the class of normal will still be take on the properties specified in the first rule and the second rule just targets the font-weight. Example: Note: Quotes around Examples: generic family names will suggest an alternative to a UA that does not have any of your pre-defined choices available: ... more to follow ....
Tips 'n'Tricks: Part 3
p {
font: italic small-caps bold 12px/3.5 georgia, serif;
}
p {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 12px;
line-height: 3.5;
font-family: georgia, serif;
}
p {
font: bold 12px georgia, serif;
}
p {
font-style: normal;
font-variant: normal;
font-weight: bold;
font-size: 12px;
line-height: normal;
font-family: georgia, serif;
} font property as this will only affect that particular property.
p {
font: italic small-caps bold 12px/3.5 georgia, serif;
}
p.normal {font-weight: normal;} line-height values are calculated from the font-size that is set on the element so 3.5 in the first example is 12px x 3.5 = 42px. line-height can also be set in percentage values so 3.5 would be = to 350%. font-family
Always offer a choice of font family names and make sure the last one is a generic family name. Commas indicate that each name is a choice within a list, browsers will go through the list, and choose the first one it has available. The generic one will suggest an alternative to a browser should it not have any of your previously named choices installed. p {font-family: verdana, helvetica, arial, sans-serif;} font-family names should not be used except if font-family value = multiple words that are not hyphenated
p {font-family: "Times New Roman", serif}
p {font-family: verdana, sans-serif}
Brought to you by WebmasterWorld: http://www.webmasterworld.com