Cvramen’s Guide to CSS, Part 2
So, I’ve told you what CSS isn’t. What is it? What does CSS do?
A CSS file sits on a server just like any other file, just like the HTML file. You have an HTML file that has stuff in it, and then a CSS file that references the stuff in the HTML file and tells it what to do. You could also reference multiple things in multiple HTML files, as long as the things have the same name.
I wrote 'menutext' and then told the table what to do. I wanted the words on the menu to be 10pt large, uppercase, bold, white, and have the font face 'Trebuchet MS'. I wrote all of this in the CSS file.
So, here we have a table with 8 different blocks of text on it. I named the table 'menutext'. Click on the image for full view.
I didn’t make anything in the CSS file, as you can see, the table with the random blocks of latin text was already there. I made the table in the HTML file and modified it in the CSS file.
On the right, what the page would look like without being modified by CSS.
And the font face of text inside tables isn’t the only thing you can alter with CSS. You can alter background color, width, height, transparency, alignment and a variety of other things (there is a specific list of properties that you can change with CSS, not to mention some proprietary ones not part of standard CSS). And you can modify not just text, but, paragraphs, hyperlinks, divs, the entire page’s background, so many things. However, this is where I start stepping on the territory of other CSS tutorials, so I will just leave you with that.
4 Responses to “Cvramen’s Guide to CSS, Part 2”
Comment from cvramen
Time July 24, 2010 at 5:24 pm
“You’re using a table based layout which is a terrible coding practice.”
That’s a subjective statement. Feel free to expound on your opinion if you’d like. Regardless, the fact remains the same that pretty much any HTML element can be altered with CSS, and that includes tables. You said that my entire layout should be div-based- that is also a subjective statement and we could spend a long time debating that.
There are lots of things one can edit with CSS, but the example I chose to provide involved a table; Tables are something that people are more likely to be familiar with.
As for the rest of your post, I appreciate your enthusiasm, but I’m not allowing that kind of garbage on my website.
Why one would prefer a div-based layout instead of a table based layout (or the other way around) is certainly an interesting topic. As to which one is better, and why, seems like a debate beyond the scope of this article. Perhaps I’ll write a new article with my opinion on this issue someday.
Comment from negzero
Time July 26, 2010 at 9:21 am
For why tables are a bad idea for layout, refer to this post’s first answer on stackoverflow.com:
http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html
Comment from cvramen
Time July 28, 2010 at 9:09 pm
There is definitely some interesting information on this page. I like the think of “tables v. divs” the same way I like to think of “Mac v. Windows”. Which one is better? It doesn’t matter which one is better; They’re both Turing-complete and they both serve different people with different thoughts and desires. Pick the one that’s best for *you*.
Some of the information on the page you’ve linked to promotes a false dichotomy of “table-based layout” v. “CSS-based layout”. People might be led to believe that CSS is somehow an alternative to tables. For example, one person says, “CSS really does have significant advantages over tables for layout.” What a bunch of nonsense. This statement is a null set because CSS is a file type and a table is an element in an HTML page. It makes about as much sense as saying “gasoline does have significant advantages over cars.” Gasoline isn’t anything like a car. It’s something that can be *used* in a car (or it can be used in boats and lawnmowers).
The fact of the matter is that CSS can be applied to pretty much anything- including tables. Therefore, it’s not “CSS v. tables”, it’s “divs v. tables”.
With comments such as those, it’s hard to separate the wheat from the chaff. Given that, I wouldn’t suggest anyone new to web design go to *that* page.
Comment from negzero
Time July 23, 2010 at 11:46 am
Again man, you’re killing me. You’re using a table based layout which is a terrible coding practice. Your entire layout should be CSS based (so using divs’ instead of the tables) and keep your presentation logic separate from the business logic.