Blog Post

Beginner CSS book on a bookshelf

Excerpt – Beginner CSS: Like Putting Lipstick on a Zombie

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). (Read an Excerpt) 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:

selector {
property: value;

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

<p>Zombies make me feel angry!</p>

and give it the following CSS

p { color: red; }

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

Zombies make me feel angry!

Stopping the Spread of the Contagion

There are three main ways to connect HTML and CSS, to stop the spreading of the contagion: direct injection, a hit to the head, or inoculating all the pages at once.

Direct Antidote Injection

You can inject the CSS antidote directly into the HTML tag by using a style attribute.

<p style="color: darkmagenta;">Take darkmagenta, zombie scum!</p>

Take darkmagenta, zombie scum!

The benefit of direct injection is that it’ll always take priority over any other style. The downside is that if you have fifty elements whose text you want to turn darkmagenta, you have to add it to each and every one. And if the contagion develops a resistance to darkmagenta and you need to change the color to cornflowerblue, you’ll have to update each and every one of those darkmagentas.

A Hit to the Head

The next way to add CSS to an HTML page and the way that’s generally used in this book for ease and clarity is to use a style element. Style tags should generally be in the head tag, but as of HTML5 are allowed to live in the body too. This allows you to do

p {
color: darkmagenta;
<!—some tags left out-->
<p>Take darkmagenta, zombie scum!</p>

Take darkmagenta, zombie scum!

Now every p tag’s text on the page will be darkmagenta. If you need to change the color on a page to ghostwhite you only have to do it in one place.

But what if you have fifty people errr pages to inoculate? That’s where the next technique comes in.

Want to keep reading? Pick up Beginner CSS: Like Putting Lipstick on a Zombie