While HTML structure kicks major zombie bootee, when you use CSS to make it aesthetically pleasing, you’ll kick a million more zombie butts. You’ll learn the basics of the Cascading Style Sheets language including how to set color and fonts, and create proper layout.

Beginner CSS

Beginner CSS: Like Putting Lipstick On A Zombie

Preface

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.

Zombie Lipstick

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.

Stopping the Spread of the Contagion

Most selectors are one of four things: a tag name, a class name, an id name, or some combination of those three. This combination is also called a descendant selector, either because you’ll descend into apocalyptic madness when you use it or, less likely, because it only affects the descendants or children of the tag/class/id that came before it. Don’t worry. We’ll come back to this.

Selecting Your Target

There are a number of methods to set a color, whether it’s for text, background, border, or anything else.

Painting the Zombie Town Red

Note: Depending on your e-reader's settings (and how far along the apocalypse is) some of the font effects below may not display as stated. Particular culprits are text not being sized smaller than the average, link underlines not being removed, and text that's supposed to be transformed to uppercase remaining lower case. They should, however, work in the CodePens and file demos when accessed on a computer/other device.

Hitting the Zombie in the Font

Now that you have a handle on how fonts can be set and font properties changed, we need to take a look at the CSS box model or how elements stack within a webpage.

Boxing the Zombies Out

Now that you’ve played around with the zombie-defying CSS box model, we should talk about backgrounds.

Zombie Photo Backgrounds

Now that we're adept at backgrounds, let's look at how to make zombie-chopping layouts.

Zombie-Chopping Layouts

While browser variations are fewer and further between nowadays, they do still exist even between the same browsers on different platforms. Safari on iOS is different than Safari on Mac, which is different than Firefox on any platform, which is different from Edge and Chrome and Opera and the browser that is currently being built that no one knows about yet. The best way to make sure that your site looks great in any browser is to test it in that browser and see how it looks. There will often be little to no difference, but, sometimes, even a small spacing issue can snowball into a zombie apocalypse.

Killer Browser Differences

Reading about this will mean jack-squat when you're face to face with a halitosis-laden army of hungry zombies. So while you're waiting to be eaten, it's a good time to practice your CSS.

Checking Your Lipstick in the Mirror

Well, we’ve hit all the basics of CSS that you’ll need for your first foray into Zombieland. But the CSS language is deep and wide and contains far more for you to work with while building pages. Find out about adding your own fonts, CSS operators, Print style sheets, Pseudo classes and elements, and who comes out of the Apocalyptic cage match when two competing CSS rules apply to the same element in Intermediate CSS: Zombie in a Cocktail Dress or find out how to create websites that work on everything from a smart phone to a souped-up desktop monitor to the screen that’ll soon make its way on to your refrigerator in Responsive Design: An Undead Introduction to Mobile Web Development . We also have books on CSS Animation , Modern CSS Layout , and Advanced CSS

It’s Not the End of The World As You Know It

Resources

Glossary

John is a professional web developer who has used these technologies first hand, building sites for bosses, clients, and his own side projects. But he's also a born educator and teaches web development at the college level. He’s spoken at many national conferences and been published in professional web development publications such as Smashing Magazine.

Community Questions