Practical and Useful Information For Enhancing Your Site

Safe CSS

I just read an article on About.com about CSS that is cross-browser compatible. Since pages like that may not be available when you want and need them, I thought I should reprint some of the information here. According to the article, if you use the following style properties, you can be fairly sure that your XHTML and HTML documents will display correctly no matter what browser your customers are using.

Fonts

Changing the look of fonts is one of the simplest things you can do with Cascading Style Sheets. And there are several CSS properties that work reliably across most CSS capable browsers.

font-family: This style property determines the family or font face of the selected text. You can define values such as generic font names like "serif" or specific font faces like "Arial".

font-size: Defining the font size allows you to specify exactly how large or small the fonts should be within your Web page.

font-weight: Font-weight indicates the darkness or boldness of the text. To be safe, you should only use the property font-weight : bold;

font-style: Font-style indicates the style of your text - generally this means italics.

color: The color of the font on your Web pages is the most common thing to change. To be most compatible, you should use browser safe colors and use the hexadecimal codes, not the names.

text-decoration: The text-decoration property is most often used to remove underlines from links: text-decoration : none;

Text

Text layout on Web pages can be manipulated with CSS. This includes properties such as the alignment, decoration, and line height.

line-height: Leading is important to designers, especially if you're used to print design. And with the line-height property, you can define this easily.

text-align: Align your text as centered, left or right aligned.

text-indent: Your text will be indented either an exact amount or a percentage of the page width.

Backgrounds

It's possible to change the background colors on your pages (or tables) or even provide a background image.

background-color: Define the color of the background. As with font colors, you should use browser safe colors and use the hexadecimal codes, not the names.

background-image: Use a relative or absolute path URL to an image you'd like to have tiled in the background of your Web page.