tag, and td.fire would only work with the table cell. If you specify an asterisk (*.fire) then this class will work with whatever you assign it to.

TipSo why would you ever use anything besides *.etc, anyway? Well, if you want the same name to mean different things to different tags, you can specify that and only need to use one name.

For example, let's say you wanted to create a fire theme for your web page. Let's also say that you want paragraphs to be red on a black background, and table cells to be black on a yellow background. You could use these CSS classes, even in the same style sheet:
Code: [Select]p.fire { background-color: black; color: red; }
td.fire { background-color: yellow; color: black; }
Both will use the same class name, so when you call classes in HTML you can just specify "fire" across the board and it will effectively apply your theme.

Class: Whatever you want to call it. Ideally, you want it to be short while being descriptive at the same time. In other words, if "one" isn't significant to you, don't name your attribute that.

Attribute: The part of the element you want to modify. Valid attributes include background-color, text-indent, border-style, and more.

Value: What you set the attribute to. For example, a valid text-indent value would be "2%". A valid background-color value could be "black". Acceptable values vary from attribute to attribute.

NOTE: It is not necessary to include the spaces between the { and the code and the }; however, this makes your classes much more readable.

Tip
In order to keep track of what class does what in your style sheets, you will want to implement comments. Comments in CSS are very simple to put in, and they will help identify what your code is about. Comments are placed between /* and */. For example:

Code: [Select]/* Background for the main site */
BODY { background-color: blue; }
Codes can also be multi-line, as in this example:

Code: [Select]/* Background for the site.
Note to IT: Blue not a good color; blends with images */
body { background-color: blue; }
Use them when appropriate, but be careful of overdoing them. You don't need a paragraph on the table cell element; a sentence or two will do.


Now, you need a place to put all these classes, right? Well, there are several methods of doing this. They are:

• Create an external style sheet. Open Notepad and type in your classes. When done, go to "file" and "save". Under "File types", select "all files(*.*)". Save it in the same folder as your home page. Name it whatever you'd like, but make sure the name ends in .css.

• Create a style sheet inside your web page, called an internal style sheet. To do this, underneath your link to the .css file (if you use it) type the following:
  
  Code: [Select]<***style*** type="text/css">
  <***/style***>
  ***PLEASE NOTE: Wherever I use a style tag, I am forced to put the *** in the tags. Do not use those ***'s in your actual tag!
  
  Between the two <style> tags, place all the classes you would normally put in a .css file.
  
  TipYou may be thinking: "Why would I use this method when I've got this nifty .css file?" And the answer is this: You use this method if you want one page to be the exception to the overall style. More detail on this later.
  
  
• Use inline styles within the tag. To do this requires no additional tags. Let's return to the p.fire example. You can do this within a <p> tag by typing this: