On this page…
CSS Zen Garden
Create the project
In Brackets, create a new project called css-zen-garden.
In your project, create two folders:
stylesimages
Download the files you will need
Go to the CSS Zen Garden website, at http://www.csszengarden.com.
The second paragraph of the site reads as follows:
Download the example HTML FILE and CSS FILE
Click on HTML FILE, & your computer should download a file named index.html. You cannot change this file (with one exception, which I will explain below).
Click on CSS FILE, & your computer should download a file named style.css. Do not change this file. Instead, keep it for reference.
Move index.html into your css-zen-garden project folder.
Move style.css into the styles folder of your css-zen-garden project folder.
Change the files
CSS
Duplicate style.css & name the duplicate file style-original.css. Do not edit style-original.css; instead, keep it for a reference. However, you are to edit the living crap out of style.css.
Got that?
style-original.cssis not to be edited. Keep it as a reference as you work on your final.style.cssshould be edited & edited & edited again to within an inch of its life. Feel free to empty the file & start from scratch if you’d like.
HTML
Now for the HTML file. With one exception, which I am about to elucidate, do not edit the HTML file!
This is the only edit you are allowed to make to the HTML file:
- Look for a link to a stylesheet in the
<head>. - The current link is
<link rel="stylesheet" media="screen" href="/214/214.css?v=8may2013">(it very well may be different when you look at it, but it will look something like that). - Change the link to this:
<link rel="stylesheet" media="screen" href="style.css">. It’s now pointing tostyle.css, the file you downloaded.
That’s it. You have to change the <link> so that it points to your CSS, but other than that, do not edit the HTML file!
(& you should edit the stuffing out of style.css!)
The images folder is there in case you want to use background images in your CSS. You may end up having nothing in it at all (although that’s doubtful).
To summarize
- Duplicate
style.css& name the new filestyle-original.css. - Do not edit
style-original.css; instead, use it for reference. - Edit the bejesus out of
style.css. - Change the link to the CSS file in
index.htmlto point tostyle.css. - Do not make any other changes to
index.html!
Oh, one more thing: do not edit index.html other than changing the link to the CSS!