If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

CSS Zen Garden

CSS (Cascading Style Sheets) can dramatically change the look and feel of a website, even when the HTML remains the same. We can get inspired from the site CSS Zen Garden! Many different programmers use CSS Zen Garden to showcase their web designs for the same HTML site, just using different CSS. The resulting sites look wildly different!

Want to join the conversation?

Video transcript

- Now that you've seen a ton of HTML text, the whole rest of this course is going to be about CSS, and everything you can do with CSS. To get you excited and get you to stay on, I want to show you one of the best examples of everything you can do. And that's a site called csszengarden.com. And you can check it out for yourself after. CSS Zen Garden is a simple site with heading and background and text and all that stuff. But the thing that's cool about it is that it's a gallery of designs of people that take the exact same HTML and only change the CSS to see how much they can change with just CSS. Let me show you. Here's another one. Remember, this is the exact same HTML that you saw in the previous page. The only difference is CSS. Here's another one. So not only do the colors change, but things get laid out on the page in a different order. And this one makes it really different, so now it looks like this cityscape with this title that comes down here, and there's credits over here, and oh my things are animating, and all of this is just CSS. Maybe it's not CSS that you know yet, but if you keep going, all of this will be available at your fingertips. If you put in enough work, you'll be able to make beautiful websites that look exactly how you want them to look. Keep going.