Originally posted by Scotttheking:
Thanks!
Could you or someone else explain how that would work? As someone who doesn't understand CSS, I don't get how exactly it would work. The example doesn't have to be code, just an explanation, although if showing some code works, I'm all for that.
--Scott
I just ran it through HTML Tidy and told it to clean everything up and I got
this. It's not really the best way to do things in a lot of areas but it can just give you something to look at and see how it got rid of font tags and cleaned some things up.
This is the super condensed version of CSS: Essentially, the HTML of a site remains essentially the same; for a good CSS+XHTML page, the HTML should basically be devoid of any style. That means no font tags, td color attributes etc... Taking care of the (X)HTML part of the page is easy; just write everything as simply as possible, removing any extraneous tags or attributes. For instance, it seems that the individual table rows are the most affected:
Code:
<TR BGCOLOR="#FF5050"><TD ALIGN="CENTER" NOWRAP><FONT FACE="Geneva">
<a href="stats.php?page=p1&UID=334">1</a></FONT>
</TD><TD ALIGN="CENTER" NOWRAP><a href="http://vspx27.stanford.edu/cgi-bin/main.py?qtype=userpage&teamnum=16&username=OneMacGuy">
<FONT FACE="Geneva" COLOR="#000000">OneMacGuy</FONT></a></TD>
<TD ALIGN="RIGHT" NOWRAP><FONT FACE="Geneva">803,776.0</FONT></TD><TD ALIGN="RIGHT" NOWRAP><FONT FACE="Geneva">2,824.29</FONT>
</TD><TD ALIGN="CENTER" NOWRAP><FONT FACE="Geneva"> </FONT>
</TD></TR>
All of that code is rather excessive once you realize that you only have 5 cells and 4 pieces of text. Removing all the extraneous tags and attributes leaves:
Code:
<tr><td><a href="stats.php?page=p1&UID=334">1</a></td>
<td><a href="http://vspx27.stanford.edu/cgi-bin/main.py?qtype=userpage&teamnum=16&username=OneMacGuy">OneMacGuy</a></td>
<td> 803,776.0 </td><td>2,824.29</td><td></td></tr>
(I broke up both examples with returns as not to overly stretch the thread's layout)
There you have the absolute minimum amount of good code needed to display the information. This is what CSS can build upon. Basically, you want to style certain parts of your page. You want one particular box a certain color, with a certain font style. You want all of your headers to be 18px tall. You want all of your table cells to have their texts centered... but only the table cells in a specific table, in your case the statistics table. So, how do you do that? Basically, you want to specifically target, or select individual parts of your page. The selecting process is done with, conveniently enough, selectors. There a few types of selectors, but the most common ones are the HTML tag, class, and ID selectors. For example:
Code:
td { text-align: center; }
What that does is target, or select all of your tds and then apply the style information within the curly braces. Let's say that you want to target
one part of your page, in your case, the statistics table. Well within the context of a good (X)HTML page, there is nothing to differentiate that table from any other table. So you need to set it apart from the others within the page. You can do this with either a class or an ID. They both identify specific parts of a page (all the summary paragraphs, for example, as opposed to
all the paragraphs). They both do similar things, but the basic distinction is that if you only have
one item per page that you want to target/select, then use an ID, as in giving it a unique ID. If, say, you want to set apart individual
types of paragraphs, where multiple paragraphs may exist on one page� use a class. I hope this isn't all too confusing, but when you actually do it, it's not too bad. So, you would want to uniquely identify your statistics table within your page:
Code:
<table id="statistics">
You can give it any ID you want, but make sure it's at least alphanumeric and doesn't start with a number. Now that you've set apart the table, you can select and style it with CSS:
Code:
#statistics { font-family: Geneva, sans-serif; }
"#statistics" is just like "td" except that the "#" signifies that the browser's rendering engine should select anything that's ID'd with "statistics". If you're using a class (in which case the html would be "class=") then instead of a hash mark/pound/whatever you'd use a period� .header
Note that you should try to start as high up as possible in the document hierarchy (tag-wise: body > table > tr > td) and find what applies to
everything lower down in the hierarchy, or at least the majority� you can uniquely ID anything that doesn't follow the norm. So starting with "body", I can see that your tables, trs, tds, paragraphs etc... all use the font Geneva, so I would do:
Code:
body { font-family: Geneva, sans-serif; }
Basically everything down the hierarchal line gets "Geneva" as its font. This is called inheritance. Not everything gets inherited however; for instance, if you set a margin on your body, not everything is going to get the same margin on the way down. Whether or not something will be inherited down the line is different for every property but it usually makes sense when it does� text based properties are usually passed down: font color, family, style, decoration etc...
Anyways (I'm cutting this slightly short, but hopefully you have a vague idea of how this all works), using what you know, you can now do something like this for your statistics table:
Code:
<tr class="red"><td><a href="stats.php?page=p1&UID=334">1</a></td><td>
<a href="http://vspx27.stanford.edu/cgi-bin/main.py?qtype=userpage&teamnum=16&username=OneMacGuy">OneMacGuy</a>
</td><td> 803,776.0 </td><td>2,824.29</td><td></td></tr>
Code:
#statistics .red { background: red }
Another thing I failed to mention is that if you combine multiple selectors, you get what are called descendant selectors. What that last bit of code basically says is "select all the html elements that are classified under 'red' and are inside the one html element whose unique ID is 'statistics'". It works from the left to right on the "containment level" if that makes any more sense. Then on all your red table rows, you'll want to mark them up like so:
Code:
<tr class="red">. . .</tr>
Another thing to keep in mind is that a big part of XHTML+CSS is making meaningful class and ID names. So if red means important, use "class='important'" instead.It will always mean important no matter what design you decide to use later, but it may not always be red. Perhaps you may later opt for a grayscale design, with dark gray being more important and light gray less so.
As you might have guessed, you'll want to do the same thing for all the other colors. You also might have realized that now that you have all of your style information in one place, you can edit it in that one place and have the entire page change� before you'd have to edit each individual line. In your particular case, it looks like your dynamically generating the page, so it probably isn't as much of a problem, but it's still good thing to have nonetheless.
Another thing I left out, since I wasn't exactly sure how much passing knowledge of CSS you have� any time I reference CSS, it should be put within a style block in your head:
Code:
<head>
<style type="text/css">
[CSS goes here]
</style>
</head>
Alternatively, you can stick all your CSS code in one file and reference it on the page (also put this in the head):
Code:
<link href="styles.css" rel="stylesheet" type="text/css" />
Which is better if you're using the CSS on multiple pages, which might be an eventual goal, but for now it won't hurt to simply keep the CSS within the page.
I hope this helps� realize that I probably could have rewritten the page in the same amount of time that it took me to write this post, but you just seemed so keen on figuring out how to do it yourself that I took the time to try and explain it all out
There are a lot of individual things to learn about CSS (for instance, you should separate all your style attributes with a semicolon, if you didn't already known� color: red; font-size: 12px;), but if you have a good understanding of how CSS works in tandem with (X)HTML, then those should come a lot easier. If you want to read through a good reference guide, check out the
WestCiv Tutorial. I usually use it as a reference, but I initially read through it; it's a good way to get up to speed with all the different things you can do with CSS>
Have fun
)
Top