CSS Font and Text Style Wizard
CSS Font and Text Style Wizard
Welcome to the CSS Font and Text Style Wizard, brought to you due to the popularity of the HTML and CSS Table Border Style Wizard. Use this wizard to experiment with font and text styles and generate sample CSS style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page. It is cross-browser compatible with Firefox, Netscape, Internet Explorer, and other modern browsers.
Font and Text Style Notes
Font Family
For font-family, you can specify an actual font name, like "Courier New" in the custom field. If the name has spaces, you should quote it, and it is case-insensitive. You can specify a comma-separated list of font names, which will be used in the order listed when some are not found on the user's system. Designers should use the most desired font first, the most compatible font second-to-last, and the generic font family last and always. For example, a common font-family value is "Verdana", "Arial", sans-serif.
Units
When you use specify lengths in CSS, you should generally use the relative units appropriate to the property. For width properties, use ex units, which corresponds to the width of the lower-case 'x' character. For height properties, use em units, which corresponds to the height of the capital 'M' character. Relative units are preferred to absolute units, like px, pt, and in. One reason for this is that one day, monitors may have more than 96 dots per inch, in which case your 14px font will look too small. Other relative values like smaller, bolder, and percentages are also better choices than the absolute values. There are always exceptions though.
Browser Support
This page does not work in Opera 8 or IE5 for the Mac. The above properties and values are the most commonly supported, but among them are some that have very limited support (e.g. the numeric font weights). There are other properties, such as those defined in CSS2, that are not shown here because they are not supported by any browsers yet. I chose to link the property names to the IndexDotCSS CSS Property Index page because they have compatibility information. They also have detailed explanations of how the properties work. For example, when you specify percentage values for the text-indent property, the percentage is relative to the parent element, which in this case is a table cell.
Vertical Alignment
The vertical alignment property is a bit difficult to grasp, and is sometimes classified as a positioning property. In general, it defines the relationship between the baseline of the element and the baseline of its parent. For text, the baseline is an imaginary line on which the text sits. Characters like lower-case 'j' and 'q' have decenders which extend below this line. For images, the baseline is just the bottom of the image. In the context of this wizard, this property is included to show superscript and subscript display with CSS.
Misc
To see text like one finds in comic books, set font-family to cursive, font-style to italic, font-variant to small-caps, font-weight to bold, and letter-spacing to 0.1ex. The justify text-align option will not have any visible effect since none of the lines are wrapped. And in case you were wondering, the sample text and image are from Alice's Adventures in Wonderland. This book by Lewis Carroll was made available by the efforts of Project Gutenberg. For information on dynamically setting styles with Javascript and how the HTML toggle buttons work, please see the border style wizard (first link below).
More CSS Wizards
Recommended Books
- Dynamic HTML: The Definitive Reference (2nd Edition)
- JavaScript: The Definitive Guide
- Cascading Style Sheets 2.0 Programmer's Reference
- JavaScript: The Definitive Guide
Disclaimer: This content is provided as-is. The information may be incorrect.