--- title: Getting Started With Foundation CSS ---

Here's the simplest way to get going. The straight CSS version of Foundation includes everything you need to start hacking away, right now! It's a perfect way to kickstart a new prototype or create a finished product with Foundation.

*** ### Download and Install To get going with Foundation, simply download a default or custom CSS package from the download page. Download Foundation CSS

Setting Up Your Project

After downloading the css files, follow these simple steps to get started:

1

First, after you unzip the package, move the folder to your desired location and open it in a text editor. If you don't have one already, we use Sublime Text here at ZURB. It's powerful and free.

2

The ```index.html``` is your homepage. It has been linked up with foundation.css, normalize, and all the necessary JavaScript files for you. Just add your code between the `````` tags.

3

Next, you should create a new stylesheet and link it in the header of your HTML file, like so:

{{#markdown}} ``` ``` {{/markdown}}

Note: At ZURB, we call our custom stylesheets ```app.css```. This is important for updating purposes: if you are going to add custom stylings to Foundation components, the code should be copied into your ```app.css``` file and edited there.


What You Get

When you download the Foundation CSS package, you'll receive a .zip file that contains all the things you need to get started with Foundation. Below we explain every file in detail and how you can add your custom CSS.

Stylesheets

JavaScript

Other


Best Practices

We have some best practice recommendations to help you optimize your experience with the Foundation CSS package.

Making Changes to Foundation Default Stylings

In order to update your Foundation CSS when we release a new version, we recommend keeping your ```foundation.css``` file clean of any changes. Any components that you want to add your own stylings to should be copied to your ```app.css``` file where you can make changes there.

Note: be sure to link the ```app.css``` stylesheet into the `````` of your file.


HTML Page Markup

As you'll see in our `index.html` sample, Foundation pages have some specific markup required for them to work. This code block is a simple boilerplate for content-free Foundation pages that we hope comes in handy.

HTML

{{#markdown}} ```html Foundation 5 ``` {{/markdown}}