,
, and. /* /* the bat that browser support for vertical-align is almost zero. But I will state the basics here, in the hope that later browsers will support it. H4 { vertical-align: top } The vertical-align attribute enables you to control the vertical placement of text or replaced elements (e.g., images) relative to a parent element. For example, if you vertical-align as top a 2-by-2-pixel GIF and its parent is
text, then that GIF will appear at the top of that line of text. Here are all the possible values for vertical-align: top aligns the top of the element with the tallest parent element on the line. bottom aligns the bottom of the element with the lowest parent element on the line. text-top aligns the top of the element with the top of the font of the parent element. text-bottom aligns the bottom of the element with the bottom of the font of the parent element. baseline aligns the baseline of the element with the baseline of the parent element. middle aligns the midpoint of the element with the middle of the parent element. sub puts the element in subscript. super puts the element in superscript. The only current browser support for any of this comes from IE 4 and 5, which support the last two values. /* /* Color can be hex values #FFFF66 or RGB Values rgb(51,204,0) (notice, no spaces for RGB. background-color can laso be defines simply as background) /* /* Apply background-image to an element, and you can put a GIF or JPEG behind it with ease: B { background-image: url(/webmonkey/98/15/stuff3a/background.gif) } You can call up an image with a URL, either a relative one like images/bg.gif or a full URL like http://www.webmonkey.com/images/bg.gif. A value of none will override any inherited value for background-image. When you specify a background image, it's a good idea to also specify a background color using, obviously, the background-color property. This solid color will appear while the image loads, and it will also show through any transparent regions of the image. /* /* Background images always have to tile, right? Nope. With this CSS property, you can control if or how those images tile. P { background-repeat: no-repeat; background-image: url(/webmonkey/98/15/stuff3a/background.gif) } The above rule was applied to this entire paragraph. The same background GIF we've used before appears behind the text, but since we've used no-repeat, it doesn't tile, instead it displays just once. A value of repeat-x makes the image tile horizontally (like you see behind this paragraph), and repeat-y makes the image tile vertically. By the way, a value of repeat makes the image tile in both directions, which is what we're used to seeing./* /* you can also set up a background image that doesn't scroll, but remains fixed in the window regardless of where you scroll on the page. The key is background-attachment. BODY { background-attachment: fixed; background-image: url(/webmonkey/98/15/stuff3a/background.gif) } This property works only when applied to page backgrounds — that is, background images specified to the tag. You have two choices for values: With scroll, the background image will scroll normally along with the page's contents, the way we're used to seeing it. With fixed, the background image will not scroll, but remains fixed in place regardless of any scrolling the user does. /* /* When you use pixels, your Web pages will not print consistently. Sometimes they won't print at all, and sometimes they'll print with ultra-tiny text. Also, in some browser versions, users won't be able to adjust the font size using the browsers' preferences. You can use an em with pt too. An em is a unit of distance equal to the point size of a font. When used in stylesheets, an em refers to the size of the parent element. Thus, in P { font-size: 20pt } B { font-size: 1.5em } any text within
would be 30 points. (The text is one and a half times that of its parent.) A third way to specify text size is through percentage values. Here's an example: P { font-size: 15pt } B { font-size: 300% } These rules translate as follows: Make all text within
three times as large or 45 points. Percentage values are always based on some inherited value from a parent element. The browsers are a little buggy with percentage values, so test often. Font style can be italic or normal. Font weight can be bold or normal. text-decoration: underline makes the text, um, underlined. Check out these words. overline adds a line above the text. Check out these words. line-through puts a line through the text (i.e., strike through). blink is your basic, familiar nightmare. The text blinks. (not on my browser!) none makes sure none of the above happens. The none value is magical. With it, you can remove the line under text links. Here's how: A:link { text-decoration: none } A:active { text-decoration: none } A:visited { text-decoration: none } /* /* We need to mention one more property here: font. The font property is a kind of shorthand for a few of the other properties. It's a way of assigning font-size, line-height, and font-family all at once. Here's an example: LI { font: 12pt/16pt courier } This one rule defines
- text as 12 points in size, 16 points in line height, and in the Courier typeface. If you use font, you must always set the font size and font face, but the line height is optional. Make sure the values are in the exact order you see above. /* /* With the word-spacing property, you can add additional space between words: H3 { word-spacing: 1em } The value you specify will be added to whatever default value the browser already uses. You can use any of the length units we talked about in Lesson 2 when looking at font-size: in (inches) cm (centimeters) mm (millimeters) pt (points) pc (picas) em (ems) ex (x-height) px (pixels) /* /* H3 { letter-spacing: 10px } The functionality is similar to word-spacing: Values are added to the default browser spacing. And you can use any of the same units listed above. For both of these properties, you can also use a value of normal, which will ensure that the default browser spacing is used instead of any inherited word or letter spacing./* /* line-height is a godsend. With it, we can achieve control over the vertical spacing between lines of text: B { line-height: 16pt } Whatever value you use is the amount of space between the baselines of two adjacent lines of text (the baseline is what characters without descenders — "x" but not "y," for example — sit on). Note that your value totally replaces the default browser value. Netscape Communicator and Internet Explorer add the line-height value before the line. Thus, if you specify a value of 10px, then the browsers will display the first line of text 10 pixels down. There are three different ways to give a value to line-height: by number, by length unit, and by percentage. Leading by Number B { font-size: 12pt; line-height: 2 } When you specify line-height with a number, the browser uses font-size to obtain the leading: It multiplies font-size by the number. So in this example, the line-height is 24 points. /* /* Want to give a paragraph an indent? (After living on the Internet for a while, you may have forgotten what an indent is!) Use the text-indent property: P { text-indent: 2em } Here you can see the above rule applied. The property works only on block-level elements (as defined earlier on this page). You can specify text-indent using any of the familiar length units. You can also use percentage values. For example, this paragraph has an indent of 40 percent, which means the first line is indented 40 percent from where it would normally begin. (IE 4 for Windows assumes the percentage refers to the entire browser window, not just the width of the paragraph.) Finally, if you give your text-indent a negative value, then you get a so-called hanging indent, in which the first line actually begins left of where it normally would. This paragraph has a text-indent of -10 pixels. IE 4 and 5 are a little buggy: They might not display the first few letters. /*