This here is just to teach the very basics of CSS. I'll be talking about it in class, but this is here to follow along. And because my handwriting might possibly suck.
I want you to understand what CSS is, and how it complements HTML; to grasp its elegance and power. And to utilize this terrifying power for your own website. As always, the question is, "Will you use your power for good… or for awesome?" All right, corny jokes aside, I expect this hopefully by the end of the day:
It's a pretty simple goal, and I feel confident that we can go far beyond that, but it's a minimum we can aim to blow right past.
As you might have gathered by now, CSS is used for determining how your website looks. CSS stands for Cascading Style Sheets. I'll explain the cascading part later, but a style sheet contains a set of rules that basically determine how a page looks. For example, the stylesheet for this page can be viewed here. Just take a quick peek. You can put CSS directly in an HTML file, but more usually you just put CSS in a separate page and then use a special tag to link to it from other HTML pages.
So you guys may be thinking, "I already know how to make my page look cool. It's the bee's knees, man. Why do I need to learn yet another way to set the background and change fonts?"
Well, imagine this: you've just been paid $8000 to build a 150-page site for DancingHippos.com. They give you a picture of what they want the site to look like: purple headings, dark green text, and this certain image as a background to all the pages. You spend a month building the page and proudly display your work to the management of DancingHippos. They respond:
Isn't management cute? Now if you were using font tags all over the place, you're going to need to edit 150 pages in under an hour. Possibly you're familiar with some multi-file search and replace tools, but even those can be risky to use if you accidentally replace more than you mean to. Now, some websites number in the thousands of pages, so clearly there really needs to be a better way than that.
Enter CSS.
Rather than using font tags all over the place, with CSS you can have a single file that all 150 pages reference to that has these two rule-sets:
body {
background-image: url(/images/hippo2.gif);
color: purple;
}
h1, h2, h3, h4, h5, h6 {color: green;}
You just solved the problem editing a few words in one file rather than one-hundred and fifty. That's a lot of work to save.
CSS has many other advantages as well. See, HTML is a markup language and isn't really designed to determine how your website should look. Mark-up languages are pretty much good at "marking up" what data is. Like, <p></p> surrounds paragraphs, <title></title> surrounds the title. Font tags work okay, but CSS is what really shines for determining how things should look.
With CSS, you can separate the content from the design. If you go to CSS Zen Garden, you can see just how powerful this is. Try clicking on some of the designs. They look quite different, don't they? The HTML is exactly the same for all of them. Don't believe me? View the source for yourself. Now imagine you manage a company website and they want to do a redesign... do you want to do the whole entire thing from scratch, or just edit a single CSS file and have it applied to all the pages?
You also tend to get smaller and cleaner code with CSS, and the possibility for determining how things look on different mediums... your cell phone, to a screen reader. It's easier to make a site accessible for the blind, or optimize it for a search engine with CSS instead of tables and font tags.
Additionally, the font tag is deprecated which means that in the future it's not guaranteed to work in standards-compliant browsers. Best switch now if you can.
So how does CSS work? Let's create our own stylesheet:
body {padding: 40px; color: green;}<LINK rel="stylesheet" type="text/css" href="styles.css" />. This makes the page use the stylesheet that we just created.Go ahead and view the page. What you should see is that all your text that wasn't already in between font tags should have turned green and that your page has more space in the sides. Now, let's explain what we just put in our stylesheet.
body {padding: 40px; color: green;}The part "body" is called the selector. It corresponds to the HTML tag that you want the rule-set to apply to. So, you can put just about any valid HTML tag in there, including <a>, <p>, or <h1> as quick examples.
Next comes a curly bracket: "{". Everything in between the curly brackets is part of the rule-set that belongs to the selector.
In the brackets are rules. We have two in our example.
A rule starts with a property. "padding" and "color" are the properties in the example. After the property comes a colon. Then, you specify an attribute for that property, such as "40px" or "green". You end the rule with a semi-colon.
Those are the basics of CSS. You can find a list of all the properties at Blooberry.com or in the MSDN library Justin links to.
Not all CSS properties work in every browser. Internet Explorer, in particular, will support more of them in the next version. But most of these are more advanced and if you stick with margin, padding, the font and text stuff, backgrounds... you'll probably be fine.
In any HTML tag, you can specify an attribute called class. For example: <p class="special">. In the CSS file, instead of using <p> as the selector, you can replace it with a .classname. In this case, the selector would be .special.
By listing selectors all in a row, separated by commas, they can be applied the same ruleset. For example: h1, h2, h3, .special {color: blue;} will make all three h tags, and anything of the "special" class blue.