---
title: Quick Start
area: start
section: start
list-order: 0
---

<div class="section-header">
  <h2>Setting up Petal</h2>
</div>

<h4>Quick Start</h4>

<p>Include the line below inside the <code>&lt;head&gt;</code> of your HTML file. Place it before any other site page stylesheets.</p>

<div class="code-block">
{{#markdown}}
``` html
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/shakrmedia/petal/7841a6e8/dist/petal.min.css">
```
{{/markdown}}
</div>

<p>The CDN link will provide the latest minified pre-built version of Petal with default settings.</p>

<p>Now you can use all the Petal classes and styles in your project's HTML file.</p>

<p>If you want to customize options and personalize Petal style for your project, you will need to build Petal manually. Head to <a href="advanced.html">Custom Building</a> for guide and recommendations on integrating Petal into your project.</p>

---
title: Quick Start
area: start
section: start
list-order: 0
---

<div class="section-header">
  <h2>Setting up Petal</h2>
</div>

<h4>Quick Start</h4>

<p>Include the line below inside the <code>&lt;head&gt;</code> of your HTML file. Place it before any other site page stylesheets.</p>

<div class="code-block">
{{#markdown}}
``` html
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/shakrmedia/petal@0.11.1/dist/petal.min.css">
```
{{/markdown}}
</div>

<p>The CDN link will provide the latest minified pre-built version of Petal with default settings.</p>

<p>Now you can use all the Petal classes and styles in your project's HTML file.</p>

<p>If you want to customize options and personalize Petal style for your project, you will need to build Petal manually. Head to <a href="advanced.html">Custom Building</a> for guide and recommendations on integrating Petal into your project.</p>

Change rawgit link to jsdelivr
Change rawgit link to jsdelivr
