HTML does a lot of really cool things, but it doesn't do a very good job as a design tool-- things like colors, layouts, backgrounds, etc. Starting in the mid-90s though something called "Cascading Style Sheets" came along as a promise to solve these and other problems. Now, if you are taking a class from me, chances are you won't really need much CSS at all-- well, unless you are taking "Writing for the World Wide Web" from me, but that's another story. Still, a little familiarity with CSS is increasingly important because HTML editing software tends to automatically incorporate elements of CSS nowadays, and blogging software (like Blogger) works as a result of some CSS code, too.
CSS can get pretty darn complicated pretty darn fast, so I am just barely scratching the surface here. If you are interested in this stuff, you can do a search for CSS tutorial or go into Borders and look at the computer book section. My goal here is to expose you to some of the basics of how it works. To keep it simple, I'll just describe here some rules for inline style, internal style, and external style.
Let's say you want to change the look of just one sentence in your web site to look different from all the others-- different font, color, size, whatever. This is pretty easy to do, and it's called "inline style." Here's how that might look in the code:
<font color="red"
face="Arial, Helvetica, sans-serif">Here's a sentence I am making
red
and arial font.</font>
This looks a lot like HTML, and I suppose you could argue that it actually is. Anyway, here's how it would look on the page:
Here's a sentence I am making red and arial font.
The inline style example just changed one sentence. But let's say you want to make changes that impact an entire page. One way you could do that-- especially if you just want to change one page and not an entire site-- is with an "internal style sheet.". Here's how that works.
<head>
<title>This is the title of a web page</title>
<style type="text/css">
body{margin-left: 50px;}
p
{color: blue;
}
h1{color: red;
}
</style>
</head>
Just to point a couple of things here that are probably obvious: all of a sudden
there are a while bunch of different words and commands, with these "{"
things and all the rest. Yep, that's CSS stuff alright.
Finally, there are external style sheets, which what make CSS such a useful and cool thing for any web site that includes more than two or three pages. As you might guess, "external" means outside of the individual HTML document. So, to experiment with this a bit:
First off, this is all just SO very tip of the iceburg! CSS is used for all kinds of things having to do with the look and feel of just about everything on the web-- colors, graphics, layout, you name it. CSS (in combination with PHP, HTML, and a few other things) is behind how things like blogs and content management/course management systems work and look, and most current HTML editing tools presume CSS and they will often insert these commands for you automatically. Needless to say, some of this CSS can get pretty scary and tricky pretty fast.
A really good place to see examples of what I mean is the site css Zen Garden. Basically, this is a site where professional web designers demonstrate the many MANY ways that the content of the same HTML document can be transformed by different CSS documents.
Second, the good news is that for the purposes of a really basic web site, you don't really need to worry about this too much. You need to be aware that CSS is out there, and you might want to dip your toe into it with a few simple commands. But doing much more than what I've described here gets into beyond the basics.
Third, in case you're wondering where the term "cascade" comes from: an external style sheet will control all the style elements of a page that links to that style sheet. However, internal style trumps (or defeats) external style, and in-line style trumps internal style. Thus, style rules "cascade" from one style sheet or another. Cool, huh?
Well, if you are reading this web site because you are in a class I teach (except "Writing for the World Wide Web"), keep in mind that you are "on your own" for CSS beyond this point. (Oh, and if you are a student in my version of "Writing for the World Wide Web," you will be learning a lot more stuff about CSS, believe me.) Where to learn more?
Well, you can do a search for "CSS Basics" or "CSS Tutorial" and come across hundreds of web sites to help you out. Two simple examples:
But I think this is a good time in which a good ol' fashion book format might be easier to work with. If you go into the computer section of any "big box" book store, you'll find hundreds of different books. Personally, I'm okay with those "Blank for Dummies" book; just about anything written by Molly Holzschlag or Eric Meyer is going to be good, but there are of course many other options. CSS rules continue to evolve, so it is probably worth it to get a hold of a book that is only a few years old.