What is CSS?


Up until now, your websites have looked pretty boring: just black text on a white background. CSS is the language that will let you make your websites look much prettier.

Here's an example of the power of CSS - take a look at this jsbin:

Screen Shot 2016-07-25 at 2.08.50 PM

Pretty boring, right?

But by adding one line of HTML code (a line that imports a CSS style sheet):

<link rel="stylesheet" media="screen" href="/214/214.css?v=8may2013">

that exact same code makes a page that looks way better:

Screen Shot 2016-07-25 at 2.11.36 PM

Just by changing the CSS, you can make the exact same HTML code look completely different:

Screen Shot 2016-07-25 at 2.12.12 PM

"Web Design in 4 Minutes"

Here's another example of the power of CSS: Web Design in 4 Minutes.

The website starts out very simple - just the basic HTML you're already familiar with:

Step by step the website gets more CSS rules that make it look better and better:

Until the final result:

It's important to never forget that your content is always the most important thing, but making things look good helps your content get consumed.

How is this possible? You're about to find out :D


References


Challenge

Poke around the full list of CSS Zen Garden designs and paste the URL to the best one below.


Solutions

Try this challenge on your own first, then come back here to see other people's solutions.

Try this challenge on your own first, then come back here to see other people's solutions.