Quit bitching about how you don’t know CSS and read this article

Posted on 9 December, 2008 at 10:41pm

Hey. You there. Yes, I’m talking to you, Guy Who Hasn’t Written HTML Since 1998. And you, Software Engineer Who Can’t Be Bothered By UI. And even you, Stubborn But Secretly Insecure Old-School Web Designer. You know what CSS is. Chances are good you’ve heard a lot of people bragging talking about it. There’s a reason they do, and a reason you want to learn about it. Effective use of CSS greatly reduces code bulk and makes your design brilliantly maintainable, all without you ever having to think. Well, much.

I think the problem many people experience when trying to learn CSS is that they jump straight into the hard stuff (layouts, box model, browser compatibility) without learning the basic structure and behavior of the language. Here I’m just going to present you with a simple document and show you how to style the text on the page using CSS. You’ll learn about the different kinds of selectors and how inheritance behavior works, and it will hopefully provide you with a framework for learning the more advanced stuff.

It’s easier than you think. So leave your mental blocks at the door and come on in.

Style: It isn’t just for the design kids

So you have a document. Let’s call it boring.html. Go ahead and copy this into a text editor of your choice:

<html>
<head>
<title>Boring-ass document.</title>
</head>
<body>
  <h1>Don't mock my pain!</h1>
  <h2>by a webpage</h2>
  <p>I know I'm a boring ol' document.</p>
  <p>But surely you have room in your life for <a href="#">someone like me?</a></p>
  <p>I'm just <em>so</em> lonely...</p>
  <p>Will you go out with me?</p>
</body>
</html>

Pretty straightforward, huh? If you don’t know what you’re looking at, start here. Come back when you’ve mastered the art of marking up a bunch of emo rambling with HTML. (LiveJournal is a good place to practice this.)

Now then. Open the page up in a browser and you’ll see why it’s so down in the dumps. Looks pretty crappy, doesn’t it? A little bit Class of ’96. I’m not hating on Times New Roman, but a new font would go a long way towards getting this guy a date to the prom.

If I said you had a great <body>, would you hold it against me?

Go ahead and stick a style tag in the head of your document. That’s where we’ll house our CSS. (You can also link to an external CSS file, which is great for keeping the same styles across many documents. But we’re going to keep it simple for now.)

So we want to change the font across our document. We want this change to be global, right? Don’t want to see Times New Roman creeping in where it’s not wanted. It’s a good thing we’re using CSS for this, because this grand, sweeping vision can be accomplished with one line in your style tag.

<style>
body {
  font-family: Arial, sans-serif;
}
</style>

Save. Refresh. Ta-da! You should see that all of the body text has changed to Arial. Now then, what exactly did we do?

As you probably already know, an HTML document is essentially a tree of nested nodes. p tags are nested in the body tag which is nested in html. The default stylesheet applied by browsers is pretty intelligent about when to inherit CSS styles from parent nodes. An attribute like font-family or font-size will be inherited down through the tree, so if you apply font styles to the body tag you will see those styles applied to the entire document. Neat, huh? You will usually set your base font styles on the body tag for this reason.

This is called a type selector.  You can do this with any HTML tag: body, p, em, span, td, div. The sky’s the limit!

…You’re just not my type

So let’s go back to our body styling. The font size is a bit big for my tastes, so let’s bring that down a little. (Now, I should note that there are a great multitude of ways to size text, including a few that are more elegant than what I’m showing you here. For the sake of your understanding and your sanity, I’m going to sidestep the issue for now and simply use pixel values. If you really want to know the gritty details, thar be dragons beyond ye hyperlinke.)

<style>
body {
  font-family: Arial, sans-serif;
  font-size: 13px;
}
</style>

Hey, look at that. Much better. “But Anne,” you whimper. “Why didn’t the h1 and h2 inherit the font-size property and become 13px as well?” Worry not, youngling. I said the default stylesheet employed by the browser was pretty smart (just like you). It inherits the base font size, then sizes the headers with relative values. h1 is 180% of the base size, h2 is 160%, and so forth. This way the visual hierarchy of the headers is preserved, even when you change the base font size. And all without you having to individually define each one. Nifty, eh?

Play around with this a bit. Try different tags and attributes and see what happens. Be amazed at how pretty you can make this page without ever having to touch a class selector. (We’ll get to those if you haven’t heard of them. But chances are you have, and they annoy you.)

Here’s what I came up with:

<style>
body {
  font-family:Arial, sans-serif;
  font-size:13px;
  padding:30px;
}
h1 {
  border-bottom:1px dashed #ccc;
}
h2 {
  font-style:italic;
  font-size:14px;
}
a {
  color:#CC6699;
}
</style>

Hey, this isn’t so hard!

The one time in your life class will actually be useful

“But Anne,” you whine. “This is all well and good, but what if I don’t want to change every p tag on the page to style one block of text?” You astute observer you. It’s very true that sometimes you need to apply a style to a specific object or element. Why don’t we give that a try and see how it’s done? For this we’ll bring out the power of the class selector.

Our emo web page is looking pretty good, but it needs more drama. Let’s take that last paragraph and dress it up a little. If we want to isolate a section of text or a specific tag (instead of all tags of that type), we have to assign a class to it in the HTML. Let’s go back to our markup and fix it up:

<html>
<body>
  ...
  <p class="proposition">Will you go out with me?</p>
</body>
</html>

You can name your class whatever you want, but remember what you called it when you return to your CSS declarations. Go ahead and add the class selector the same way you’d add a type selector, only this time preface the name with a period to indicate its classiness.

.proposition { }

The styles you define for .proposition will apply to all elements you add the class=”proposition” attribute to. In this case, it’s just one paragraph, but it could be any number of objects on the page. Classes are pretty laid back that way.

So now that we have this in place, we can style that paragraph independently from the other p tags on the page. Give it a shot.

.proposition {
  color:#3399FF;
  font-size:18px;
  font-weight:bold;
}

Pretty radical. There’s no way this guy’s going home alone now.

I don’t care how big your mustache is, I’m gonna have to see some ID

There is one other kind of selector you can use to style a specific element (or group of elements, if you remember inheritance), the ID selector. In this case the CSS looks for the attribute id on the HTML tag. On the surface level it looks and behaves a lot like a class. The difference is that an ID must be unique to the document — There Can Only Be One. Therefore, IDs are usually reserved for high-level elements that only appear once on any given page. Most commonly these are layout elements like header, footer, navigation, etc. Since our emo page doesn’t have much of a layout, we don’t really have a need to use IDs here, but for demonstration’s sake let’s change the “proposition” paragraph from a class to an ID selector.

<html>
<body>
  ...
  <p id="proposition">Will you go out with me?</p>
</body>
</html>

In the CSS you’ll have to change the style declaration from .proposition (which denotes a class) to #proposition (which denotes an ID).

#proposition {
  color:#3399FF;
  font-size:18px;
  font-weight:bold;
}

Everything should look exactly the same. When to use IDs and when to use classes is a tricky question that is best learned with experience. The more complex your documents get, the more you’ll have to think ahead and plan the structure of your data. The goal is to make your life as easy as possible (CSS is a lazy designer’s best friend). In general, you will use classes for most of your actual styling. IDs really shine when you assign them to div tags that hold your content in neat little buckets. Then you can make good use of descendant selectors – a bonus, super-secret ninja technique that allows you style types and classes differently within the different buckets. For example, these two rules will make the a tags in the header black, while the a tags in the footer are white.

#header a {
  color:#000000;
}
#footer a {
  color:#FFFFFF;
}

And these could both be different from the global a color, which could be anything. It could even be puce.

A note about good design

One of the trickiest things to learn about CSS is how to manipulate selectors, the cascade, inheritance, and specificity to isolate portions of your HTML document while keeping the document itself as bare-bones as possible. It’s true that this kind of thing works:

<p class=”main”>Marco de Polo was a most amazing fellow. He wrote many books, including
<em><span class=”gray”>Summer Fun, or How To Ensure Every Child Ever Knows Your Name For The Rest Of Time</span></em>.</p>

<p class=”footerline”>Copyright 2008, Not True Magazine<p>

You can simply define all those specific classes in your styles and be done with it. But both your HTML and your CSS will bloat, it will be difficult to maintain, and you will too often find yourself wondering what the .littleblue class was for.

If you’re smart about things, you can reduce your HTML to this:

<div id=”content”>
<p>Marco de Polo was a most amazing fellow. He wrote many books, including <em>Summer Fun, or How To Ensure Every Child Ever Knows Your Name For The Rest Of Time</em>.</p>
</div>
<div id=”footer”>
<p>Copyright 2008, Not True Magazine<p>
</div>

And you can achieve exactly the same amount of control over the different elements in the document with CSS. p tags within the #content block have a certain style. em tags are colored gray. The #footer block has smaller text and a border on top. Easy to do, easy to read, easy to change.

Go ye forth unto the world of the web!

I’ve really just scratched the surface here, but you should now have at least a fundamental idea of what you’re working with when you use CSS. If you want to learn more complex techniques, like using CSS for layout or positioning, there is a wealth of excellent tutorials out there. Here are just a few:

Starting with HTML + CSS (W3C tutorial)
CSS-Discuss (Wiki with many tips and tricks)
Quirksmode (Compatibility charts and reference for advanced CSS)

And the next time some hotshot web 2.0 designer is bragging about the CSS on his blog, you can nod sagely and say “CSS? Yes, I know a little.” And then you can splash your drink on his trendy glasses. Do it for me?

Related posts

No related posts.

The Discussion

5 Comments on “Quit bitching about how you don’t know CSS and read this article”
  • Bringing teh funny to HTML/CSS one bad joke at a time :-)

  • what about div positioning without boring-ass tables?

  • Thanks this is exactly what I needed great post

  • @John_Idol: I hope to do a separate post devoted to positioning. I wanted to get the basics down first. Positioning can be really tricky for true newbies, and also introduces the unfortunate reality of browser inconsistencies.

  • This is a fantastic guide Anne. Thank you

Metadata

Posted
Posted on 9.12.08 at 10:41 pm
Category
Comments
5 Comments

Tags

No tags for this post.