Main content
Computer programming - JavaScript and the web
Course: Computer programming - JavaScript and the web > Unit 2
Lesson 4: CSS text properties- CSS Zen Garden
- CSS font-family property
- Challenge: Fancy font families
- CSS font-size property
- Challenge: Great big font sizes
- CSS font styles and shorthand
- Challenge: Famous font formats
- More CSS text properties
- Using CSS text properties
- CSS inheritance
- Project: Blog
© 2023 Khan AcademyTerms of usePrivacy PolicyCookie Notice
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?
Question for Pamela: are there any plans to launch an XML series?(84 votes)
So, what's the history with CSS? How did it start and why was it created?(36 votes)- Well, it was first proposed back in 1994 and the first W3C recommendation was issued in 1996. Cascading Stylesheets are all about managing the way data is presented.(50 votes)
Where do i put my html to make a website?(17 votes)
Use notepad or a similar program on your computer. Copy the code into that program and save it with .html at the end(25 votes)
What is the difference between an ID and an element?(11 votes)- An element is the opening tag (
<open>) and the closing tag (</close>) and everything in between. The computer takes the code you put in and turns it into a JS Object. An id is the name given to an element by which you can access that specific element.(4 votes)
can i mix CSS with PHP?(5 votes)- You can't mix CSS with PHP, but you can mix PHP with HTML, and HTML with CSS.(15 votes)
Is it my computer or is http://www.csszengarden.com/ not secure. Cause for my computer, if you press "View all designs" it'll say "Site can't be reached"; so how do you actually see "all designs"?(5 votes)- Try opening the website with a separate browser or through an incognito window.(4 votes)
Firefox tells me there's a security risk at entering the mentioned page. What's that about?
I can still see how different it can be, but I thought I'd make a not about this.(3 votes)
CSS Zen Garden has an unsecure transfer protocol. This doesn't itself mean any harm is coming your way. Just be wary and don't give the site private information. Make sure location and other permissions are off for the site.(4 votes)
why is css called css and why is html called html(2 votes)
CSS stands for Cascading Style Sheets.
HTML stands for HyperText Markup Language.(5 votes)
Is css zen garden not used anymore? Because I was looking at it and it seems that no one has uploaded a design since 2014?(2 votes)
These courses were recorded almost around 10 years ago. The content hasn't been updated and Pamela--the girl who teaches us--left this platform 2 years ago.(3 votes)
- how can i make a web(2 votes)
- If you mean how to make a new HTML project here on Khan Academy, this might help:
https://www.khanacademy.org/computer-programming/new/webpage
If you mean how to make a website (outside Khan Academy), this might help:
https://www.khanacademy.org/computing/computer-programming/html-css/html-css-further-learning/a/html-css-further-learning-what-to-learn-next(2 votes)
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.