How to Style Text with CSS 3

When you create CSS 3 for an iPhone or iPad site, you not only enjoy the benefits of custom fonts and drop shadows but also gain the challenge of sizing text on screens with different dimensions. Worry no more: find out how to best manage the sizing of text and then discover the joys of styling text by using CSS 3.

Adjusting text size

To help make it easier to read text on the iPhone, the default setting for the text-size-adjust rule is auto: The text is automatically scaled to the screen.

On the iPad, the default is none because the larger screen doesn’t require text to be resized automatically. On many websites, this adjustment makes the page easier to read, but if you’ve carefully designed your pages and targeted your styles specifically to the iPhone or iPad, you may want to prevent automatic resizing.

Here are three examples of how you can use this option:

-webkit-text-size-adjust: auto;
-webkit-text-size-adjust: none;
-webkit-text-size-adjust: 80%;

Here’s the code example with the addition of the webkit-text-size-adjust rule set to none; including this bit of code in the style for all these tags at one time makes none of the text in the tags automatically resize:

/* This style helps older browsers understand HTML5 and resets common tags to 0 */
article, aside, footer, header, menu, nav, section, details,body, h1, h2, h3, p, ul, li, {
                            border:0;
                            margin:0;
                            padding:0;
                            display: block;
                            /* stops WebKit resizing text */
                            -webkit-text-size-adjust: none;
                            
}

Adding text shadows

Using CSS 3, you can add drop shadows to text and to any block-level element, such as a <div> tag.

A helpful way to increase the contrast between text and the background is to add a text shadow. Text shadows not only make your page designs more interesting but also make text much more readable, especially if your design has a complex background or the foreground and background colors don’t have much contrast.

Here's the syntax for text shadows for WebKit browsers:

text-shadow: horizontal vertical blur radius color;

Here’s how filling in these placeholders affects the text shadow:

• horizontal and vertical — The first two values, which specify the horizontal and vertical offsets, are required. They specify the distance the drop shadow extends below and to the right of the text.

  
  



• blur radius — The third setting, which specifies the amount of blur in the shadow, is optional. If you don’t include a blur radius, the default is 0, which makes the specified color appear as a solid color.

  
  



• color — Specify a color using its hexadecimal color code (the traditional 6-character color codes) or its RGBa color code, which enables you to specify among red, green, and blue, as well as opacity. (More on RGBa in a moment.)

  
  

The following line of code adds a text shadow to the <h1> tag. The numbers specify that the text shadow extends two pixels to the right and below the text with a 3-pixel blur. This example uses a gray color specified with the hexadecimal color code #999.

h1 {text-shadow: 2px 2px 3px #999;}

If you specify the color as an RGBa color, you can define a partially transparent color. RGBa colors are defined by a series of numbers that specify how much red, blue, or green you want. The range of numbers is 0 to 255.

The fourth number defines the amount of opacity or transparency. (The range is 1 for full opacity to 0 for full transparency.) For example the .6 in the following example indicates an opacity level of 60 percent; 40 percent of the underlying color shines through.

The style defined for the preceding <h1> tag applies to any text formatted with the Heading 1 tag. The style below is a class style (indicated by the dot before the name). Class styles are more versatile and can be applied to any text on a page.

.shadow {text-shadow: .2em .2em .3em rgba(153,153,153,.6);}

In CSS, sizes can be specified in many different measurements, including pixels, percentages, and the em option used in the preceding example.

dummies

Source:http://www.dummies.com/how-to/content/how-to-style-text-with-css-3.html