| Lycos.com | Angelfire.com | WhoWhere.com | MailCity.com | Hotwired.com | HotBot.com | All Sites... |
|
|
|||
 |
Handcrafted Tripod's Better Builders Newsletter Vol. 1, No. 15 Back in July, we discussed how to use templates to both set your site's style and create all of your pages without laboriously coding each one individually. Cascading Style Sheets (CSS) are an even more flexible solution. While templates are still your best bet for boilerplate text, style sheets can make all of your list elements lime-green Verdana and your paragraphs right-justified, or whatever combination you desire. The best part is, you can change the entire style of your site in a flash, without having to recode each page. Got questions? Be sure to check out past issues in the Handcrafted archives.
TODAY'S LESSON: |
|
||
|
Okay, let's jump right in. Say you have a simple Web page, as such:
<HTML> The <STYLE> tag (the building block of embedded style sheets) goes anywhere in the HEAD section:
<STYLE TYPE="text/css"> See this code in action! Admittedly, that may look terrible, but it works! So what's happening, exactly? Well, the TYPE="text/css" and the information within the comment tags ("<!--" and "-->" ) inform the browser of the specified preferences. This way, older browsers won't mistakenly display the code, which your readers would no doubt find either highly amusing or seriously baffling. (But fear not; if the browser viewing the page doesn't understand CSS, it will just display the page normally.) The rest of the code instructs the browser how to display certain kinds of text. The H1 line, for example, specifies that any text on the page within <H1> tags should appear in a font from the Helvetica family (more about font families in a bit), should be 20 points high, and have a red background. The P line makes any text between <P> tags appear right-aligned in Courier, with a blue background. Using this simple format, you can control nearly everything about your page's appearance from one centralized seat of power! Specify rules to apply to any tag, such as: <B>, <UL>, <STRONG>, or any other. You might make text within <B> tags italic and huge, or you might choose to tag all text within <I> tags superscript and bold. Here's an overview of the style rules at your disposal. Font-family In an ideal world, all of your site's visitors would have the same fonts loaded on their computers, and you could specify fonts with confidence, knowing every user would have exactly the same experience. In reality, you have to make do with your best educated guess. Provide a list of desired fonts, and the user's browser will try each one in order until it finds a match. Systems running Windows typically have a font called Arial, which looks a lot like what Macs call Helvetica. Just to be safe, at the end of your list you should name the type of font you want, so that if no specific matches were made, you'll at least get the general idea across, as in this example: "P { font-family: arial, helvetica, sans-serif }". The generic font types to choose from are serif, sans-serif, monospace, fantasy, and cursive. Font-size You can specify font size in points (pt), pixels (px), or in a variety of other ways. (For these and many other details, see Mulder's tutorial, linked below.) Specify "font-style: italic" to call for italics, and "font-weight: bold" for bold. Specific numeric weights can also be selected; experiment to see how weights look with various fonts on different browsers. Text-transform Use this to capitalize or lowercase text globally -- the allowed values are uppercase, lowercase, capitalize (title style), and none. Text-decoration This property allows you to either impress or confound your users (depending on their Web experience) with those neat, albeit confusing, nonunderlined links. Just include the rule "a:link { text-decoration: none }" and they'll have to drag their mouse all over creation in search of your hidden hyperlinks. Other values for text-decoration include underline, blink, and line-through. Color Add color to your text or element backgrounds with the color and background-color properties. Coding your color as such: "B { color: #000000; background-color: #FF0000 }" will make all text appearing between <B> tags appear black on a red background. You can also add a background image to just one paragraph or element, using a rule along the lines of: "P {background-image: url(pics/plaid.gif) }". Aligning text As seen in the initial CSS example, use the text-align property to set your preferences. This works only on header, list, and paragraph text, for obvious reasons. But despite the name, you can also text-align images, as such: "IMG { text-align: center }". Paragraphs can also be indented, using the text-indent property. This property regards points, pixels, and other measurement units as values, and indents the first line of a paragraph by the specified width. A negative value results in a negative indent, with the first line hanging over to the left while the rest of the paragraph is indented. Margins That much-missed feature of printed text is now, through the miracle of style sheets, available on the Web, without requiring you to put everything in yet another layout table. A margin rule looks like this: BODY { margin-left: 10pt; margin-right: 15pt} In this example, the page has a left margin of 10 points and a right margin of 15 points. Other commands available include margin-top and margin-bottom. Borders Each element can also have a border, which can be manipulated with the border-width, border-color, and border-style properties. Widths are expressed numerically, and styles can be selected from among the following: dashed, dotted, double, inset, outset, ridge, or solid. You may choose to specify each side of the border separately. For varying widths, the different property names are: border-top-width, border-right-width, border-bottom-width, and border-left-width. For border color and style, you just list the values, in top-right-bottom-left order. To illustrate:
BLOCKQUOTE {border-top-width: 5pt; border-right-width: 10pt; Some of you may be wondering what to include if you want different paragraphs to have different styles. Not to worry; you simply call styles in-line. To do this, specify the style in the <P> tag: <P STYLE="text-indent: 20pt; color: #660066">blah blah blah</P>. Including this same style code on every page would normally require considerable typing. Instead, use classes to accomplish this task more efficiently. Define and name a style within the CLASS attribute. Just write a rule similar to the following: .slick {color: black; font-family: "gill sans", impact sans-serif } Be sure to include a "." at the beginning of your style name. This allows you, whenever you want to use that style, to call it as an attribute from any tag: "<P CLASS="slick">blah blah blah</P>". You can make as many of these styles as you want. To make your life even more interesting, create and save a separate document with all of the styles you'll be using on your pages. Then simply call that document from each page! This way, when it's time to ditch that tired, old, 20th-century look in the year 2001, you only have to change one file, and your entire 300-page site is instantly renovated. How is this possible? Easy! Just put all of your rules in a text document (no headers or anything needed), save it with a .css extension (stylee.css, for example), and upload it. In every page in which you want to use that style, include a line like the following in the head section: <LINK REL=stylesheet HREF="stylee.css" TYPE="text/css"> Voila! All of the style rules in stylee.css will be applied to the page. They will, however, be overridden by any style rules you specify on that particular page. In addition, style rules you specify in-line will in turn override those specified in a STYLE tag in the head. Now that we've given you plenty of tools to play with, get to work! Make your site grab your visitors, shake them silly, and dare them not to enjoy themselves! HINTS, POINTERS, and TIPS o' the TRADE Always test every new page containing styles in different browsers. CSS is an area where Netscape and IE have some of their biggest disagreements — some properties are only recognized by a single browser, while others are interpreted in subtly different ways. Be sure to check out how they'll look to all of your visitors before you publish. One of the most exciting uses of style sheets is the layering, overlapping, and positioning of elements relative to each other. Alas, that is a lesson for another day, but you can read about it at Webmonkey. With a "background-attachment: fixed" rule, you can have the background image remain stationary while the text on top of it scrolls. Unfortunately, this cool features only works in IE. Floss every day. Do it while you watch TV. Gum disease is a nightmare. RESOURCES: Mulder's Stylesheets Tutorial Webmonkey's Stylesheets Reference How browsers differ when it comes to CSS |
||||
|
||||
|
Get Tripod in:
United Kingdom -
Italy -
Germany -
France -
Spain -
Netherlands Japan - Korea - Peru - Colombia - Americas - Argentina - Mexico - Venezuela - Chile - Brazil |
||
|
All rights reserved. |
||
