Zombie Lipstick

You can be forgiven for not knowing this. The news and movies and media tell you that shotguns and baseball bats are the way to kill zombies, but that's not true. Violence and gore sell films, but websites are the path to infinite knowledge and having the world at your fingertips. That's how you fight zombies.

Before we can get into zombie-crunching CSS you really need a good grasp on HTML. If you’re already dispatching zombies with your HTML skills, read on. If not, check out A Beginner's Guide to Learning HTML: and Smacking Zombies Upside the Web Development. Go ahead. I’ll wait.

Ready to learn? Well, gather your wits, a text editor, and that penchant for foolish bravery you’ve had since you were a kid. Let's do this thing.

Zombie Lipstick

Cascading Style Sheets (CSS) modify how an HTML element presents itself. Sometimes that's as simple as color and font; sometimes it’s as complex as where to move it and when to make it opaque. That's the SS of CSS, the Style Sheet part, but another important aspect of CSS is the C, the "cascade," or how elements are affected by the CSS rules on their parent element.

The great thing about the cascade is that you can set the text color on the body of the page, and it will cascade down to every nook and cranny where a text color hasn't already been set. The cascade makes things easier. But there's a reason we have the term "cascading failure." Just like the failure of the government to contain the zombie contagion, the cascade can cause a lot of problems. Sometimes an update or change can have far-reaching effects on places you didn't expect.

If you want to change a lot from the defaults you set, you’ll be constantly resetting things—and every time you need to reset something in a string of parents and children, you have to get more and more specific, making it harder and harder to force the override. Pretty soon, you’ll have an unreasonably long selector that's hard to use and even harder to update in six months when the zombie contagion has stolen your memory and/or you forget what you did.

Okay, recruit, you’ve got the basic idea under your belt. Now let's see how this crazy thing called CSS actually works.

Rules of CSS Warfare

For every war, there are rules such as no chemical weapons, no mistreating prisoners, and no sending clowns behind enemy lines (even if you're fighting zombies. You’ll just get zombie clowns, and no one wants that.) And thus, as in war, there are rules in CSS. A CSS rule includes a selector and one or more declarations. The selector selects what HTML tags you want to modify with the CSS. The declaration declares what those changes should be. Declarations are, themselves, made up of two parts the property and the value. The property is what you are changing and the value is what you are changing it to. When they’re put together, they look like this:

Or, for example, to change the color of a paragraph’s text to red we could take

and give it the following CSS

and it would look like (light gray background added for clarity)