Specifying Size and Position
In a CSS style definition (or rule), you can describe positions and sizes in many ways, using many different units of measurement. You can often choose whatever unit you want, although certain specific kinds of measurements work best in certain situations.
For example, many designers working with paper and ink are used to specifying typefaces in points
Understanding little em
Because experts recommend that you use em when designing a Web page that you want to look just so, it’s worth taking a closer look at what this unit actually means. Traditionally, the em was the width of the letter m. Perhaps you’ve heard the term m-dash or em-dash, which is the dash usually employed in publishing. It’s a horizontal line — like these — equivalent to the width of the typeface’s letter m (this isn’t strictly a precise equivalent in many typefaces). There’s also an in-dash. Guess what it’s based on.
Figuring the Percentages
I switch now from considering ways to specify text size, to the use of percentages as a way of specifying the size or position of larger elements, such as paragraphs. This next example illustrates how you can use percentages to specify the width of a whole paragraph (not the font size of its text). In other words, this percentage value will tell the browser when to break a line of text into two lines (rather than how large to make the characters of text).
Adding a Bit of Color
Color is useful for both the design and the organization of a Web page. Choosing effective, appropriate, and harmonic colors contributes quite a bit to the overall success of your page. Perhaps less obvious is the role that color plays in cueing the eye to the structure and logic of your layout. You can create logical zones with color, just as you do with tables or lines. For example, you can help your users by coloring all your links the same color and grouping them in a separate area on the page — with a common background color underneath. All this helps the visitor to your site understand that these items in this area, with these colors, have something in common. And if you really want to attract attention to them, make them puce, lavender blush, or some other unusual color.
Creating special paragraph styles
Assume that you’re writing a Web page that contains special warning paragraphs, and you want these warnings to stand out. In addition to making them italic, you want the text to be a bright pumpkin color. To achieve this effect, just define a paragraph style called warning (or whatever you want to name it), and then add the italic and color specifications, like this
Using the color list
I’m not going to bore you with the details on what the #ffcc33 code means. It’s called a hex number, but don’t put a hex on yourself by trying to figure out what it means and how it works. It’s too tedious for words, believe me. I did learn it years ago and, try as I might, I cannot forget it. It’s taking up an area of my brain that I wish I could reuse for something important
Coloring borders
Foreground color doesn’t apply only to text. You can also use it to specify the color of borders. In this next example, you set the color property of an image to sky-blue. (Alternatively, you could use the border-color property if you wish.) In addition, you set the border-width to make it larger than the default. You also must specify a border-style property.
Using inset border colors
If you want to create subtle, attractive borders entirely within the capabilities of IE, you can use the inset command with colors for the various borders around a graphic. This creates a beveled look that’s certainly a step up from the flat, plain border.
Lastly Comment
For those on a budget, or for those who haven’t mastered graphics application software and therefore can’t use programs like Photoshop, you can find online advice about pushing CSS to its limits. (And remember, you must sometimes limit yourself to CSS when page load time is a major consideration.) Here’s one good site that really gets a great deal of bang for the CSS buck.
