- Error
Quick Styles
/ 1- Details
- Category: Content
- Created on Tuesday, 12 April 2011 18:53
- Written by Super User
- Hits: 2138
Quickstyles, is predefined CSS classes. Easy to use, making your content much more alive:
To use quickstyles, you need to understand a little html. Its not hard, but essensial.
This is a heading one
This is a heading two
This is a heading three
This is a heading four
This is a heading Five
This is a heading Six
HTML:
<h2 class="limegreen-color">This is a heading two</h2>
<h3 class="limegreen-color">This is a heading three</h3>
<h4 class="limegreen-background"><span>This is a heading four</span></h4>
<h5 class="lilac-background"><span>This is a heading Five</span></h5>
<h6 class="limegreen-background"><span>This is a heading Six</span></h6>
Column-Two
Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.
Column-Two
Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.
Column-Three
Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.
Column-Three
Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.
Column-Three
Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.
Column-Four
Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.
Column-Four
Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.
Column-Four
Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.
Column-Four
Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.
HTML:
<div class="column-two first">
<h1 class="limegreen-color">Column-Two</h1>
<p>Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.</p>
</div>
<div class="column-two last">
<h1 class="limegreen-color">Column-Two</h1>
<p>Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.</p>
</div>
</div>
<div class="blockWrap">
<div class="column-three first">
<h1 class="limegreen-color">Column-Three</h1>
<p>Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.</p>
</div>
<div class="column-three">
<h1 class="limegreen-color">Column-Three</h1>
<p>Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.</p>
</div>
<div class="column-three last">
<h1 class="limegreen-color">Column-Three</h1>
<p>Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.</p>
</div>
</div>
<div class="blockWrap">
<div class="column-four first">
<h1 class="limegreen-color">Column-Four</h1>
<p>Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.</p>
</div>
<div class="column-four">
<h1 class="limegreen-color">Column-Four</h1>
<p>Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.</p>
</div>
<div class="column-four">
<h1 class="limegreen-color"><span>Column-Four</span></h1>
<p>Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.</p>
</div>
<div class="column-four last">
<h1 class="limegreen-color">Column-Four</h1>
<p>Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.</p>
</div>
</div>
HTML:
<ul class="list limegreen">
<li>This is the blue version of an ordinary list</li>
<li>This is the blue version of an ordinary list</li>
<li>This is the blue version of an ordinary list</li>
</ul>
</fieldset>
Tab 1
Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.
Tab 2
Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.
Tab 3
Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.
HTML:
<li><a href="#tab1">Tab1</a></li>
<li><a href="#tab2">Tab2</a></li>
<li><a href="#tab3">Tab3</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<h2 class="limegreen-color">Tab 1</h2>
<p>Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.</p>
</div>
<div id="tab2" class="tab_content">
<h2 class="limegreen-color">Tab 2</h2>
<p>Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.</p>
</div>
<div id="tab3" class="tab_content">
<h2 class="limegreen-color">Tab 3</h2>
<p>Quisque vulputate ante in sem ultricies nec pulvinar dolor malesuada. Integer sed purus tellus, nec convallis sapien. Curabitur at mi nisi, vitae fringilla velit. In sit amet scelerisque leo.</p>
</div>
</div>
HTML:
<a class="btn lilac print" href="#"><span>Print button</span></a>
<a class="btn lilac pdf" href="#"><span>Pdf button</span></a>
<a class="btn lilacdownload" href="#"><span>Download Button</span></a>
HTML:
<img src="http://d3signated.com/images/gallery/triworks_arch8.jpg" border="0" title="This is a description, in the title tag" width="271" height="152" />
</div>
