| | |
I can not possibly outline every CSS property for you here. If you are interested in details, visit the World Wide Web Consortium website at http://www.w3.org/ or purchase Eric Meyer's "Cascading Style Sheets: The Definitive Guide" from my online bookstore at http://www.michaelmasumoto.com/bookstore/.
In this section, I will outline a few of the most essential properties, as well as other important pieces of CSS information.
Example:
font-family:"Times New Roman", "Times", serif;
As with the deprecated FONT tag with its FACE property, you need to give users more than one font choice, in case the first choice font is not loaded on their system. The first font in the list is the first choice, the second font in the list is the fallback choice if the first font is not available, etc. The desired system fonts should always be marked with quote marks. All font choices should be separated with commas. You should always end your list with one of the five generic font names; the generic font name should NOT be in quotes.
Generic Font Names and their Mac/PC equivalents:
serif Mac: Times PC: Times New Roman sans-serif Mac: Helvetica PC: Arial monospace Mac: Courier PC: Courier New cursive Mac: Zapf Chancery PC: Script fantasy (not fully implemented) Mac: Western PC: Comic
Example:
font-size:24px;
Remember: for cross-browser and cross-platform compatability, always use pixel-based font sizes in your CSS.
There are also relative values available for font-size, but they are not consistently implemented. Theoretically, they are each supposed to be 50% smaller or larger than their neighbor, but this is not always the case. "medium" is supposed to be the browser default size.
Values:
xx-small, x-small, small, medium, large, x-large, xx-large
There are two other relative values which DO work:
Example:
font-style:italic;
Values: normal, oblique, italic
The font-style property allows you to set the italicization of your text. Note: the oblique value ONLY works if the user has an oblique version of that font loaded into the browser; unless you are using downloadable fonts (which are beyond the scope of this introductory lecture), you don't want to use the oblique value.
Example:
font-weight:bold;
Values: bold, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900
The font-weight property sets the boldness of a tag. The numerical values go from light (100) to black (900) and every boldness level in-between. As with the oblique value of the font-style property, however, the user will only see 9 levels of boldness if he/she has 9 different versions of the same font loaded in his/her machine; otherwise, the font will only be bold or normal.
Example:
text-decoration:underline;
Values: none, underline, line-through, blink (Netscape 4 only)
Example:
text-indent:.5in;
The text-indent property sets the indentation of the FIRST line of text in a paragraph; the larger the text-indent value, the farther the first line will be indented into the paragraph.
The text-indent property can be set to negative values to create a "hanging" indent, which pokes out from the edge of the paragraph. If you do this, the margin-left property must also be set to an equivalent positive value to offset the hanging indent; otherwise the indent will go off the side of the browser window, obscuring the first part of the line.
Example (hanging indent):
p { text-indent:-.5in; margin-left:.5in; }
Examples:
line-height:120%; line-height:24px; line-height:normal;
The line-height property sets the "leading" for text, creating space between lines in a paragraph. Set to percentage values, pixel values, or "normal".
Example:
text-align:left;
Values: left, center, right, justify
The text-align property is used to align things left, center, or right. With text, you can also create "justified" text, which lines up on both left and right sides. Unfortunately, justified text does NOT look very beautiful in the browsers; I can't recommend its use.
You can NOT set basic font properties in the BODY tag CSS declaration and have that color and font-family and font-size trickle down reliably to child P tags and TD/TH tags, as you might expect; sometimes it will work, most of the time it won't.
You must always set text properties for the tags individually!
In CSS, there are four conceptual parts of EACH element on an HTML page, whether a paragraph of text, or a single word, or a picture, or whatever:
The margin, border, and padding of an element may be NOTHING, of course, or each property may be set individually or collectively, at will. You may set only the margin, or you may set both margin and border but no padding, or any two in combination, or all three together.
Not only can you set these properties, you can set the four sides of any of these properties individually or collectively, as well. For instance, you can set a margin of 1 inch all the way around something, or you can individually set the left, right, top, and bottom margins at different sizes.
Not all of these properties are fully and consistently implemented, of course. The margin property has been fairly stable for some time, but padding and border properties are not as evenly implemented.
To support the version 4 browsers consistently, use only the following properties:
margin margin-left margin-right margin-top margin-bottom padding border
Note: be very careful using these properties. Setting these properties for paragraphs, for instance, works well. Setting these properties for table cells is not fully implemented. Setting these properties for images breaks the text wrap features built into many of the browsers; don't use these properties with the IMG tag (in fact, do NOT define the IMG tag in CSS at all, PERIOD, or you'll be sorry!). Do NOT set these properties for individual words or hyper-references within an element, or you will get very inconsistent behavior cross-browser.
Example:
margin:.5in;
Values: any valid unit of measurement, relative, absolute, or percentage.
The margin property sets all sides of the margin evenly (top, bottom, left, right). If you wish to set the individual sides separately, don't use the margin property; instead, use the specific margin-left, margin-right, margin-top, and margin-bottom properties.
Example:
padding:.5in;
Values: only positive values using any valid unit of measurement, relative, absolute, or percentage.
Example:
border:1px solid #003300;
The border property requires three values: the width of the border, the style of border, and the color of the border, each value separated by a space. You can use pretty much any value for width (although pixel values work best). There are only a couple of values for the border style which work with the version 4 browsers, the best being "solid". The color of the border can be anything.
In the most modern browsers, you may set the sides of the border individually; this is not supported in the version 4 browsers, however, so be warned.
Note: I must again emphasize the importance of using these properties VERY sparingly, as they can rapidly get you into trouble.
In the text of Exercise Three for this module, I talked about using the background property for setting the background color and/or image for the BODY of an HTML page. One of the interesting features of the background property is that it may now be set for individual elements, such as paragraphs, as well!
Example:
p { background:url(graphics/newsletter.gif); }
Any element may theoretically have a background color or image. Use this feature sparingly, however, as it does not work in a perfectly consistent manner.
There are properties relating to backgrounds which allow you to control the manner in which the background image tiles, how often it tiles, where it tiles, where it is positioned, whether it scrolls or remains fixed on the HTML page (a watermark), etc. These properties are too numerous to explore in this brief excursion into CSS, nor are they completely or consistently implemented. For more information, refer to http://www.w3.org/ or purchase Eric Meyer's book.
 |
 |
Copyright © 2001 Michael Masumoto. All Rights Reserved.