Examples
There are demos of Quick.css capabilities. If you open the source code of this page you'll see all of them.
Grouping
The tag <hr>
The hr element represents a paragraph-level thematic break and look like:
The tag <pre>
The <pre> element represents a block of preformatted text. To represent a block of computer code, the <pre> element can be used with a <code> element like in this case:
<h2>Code formatting</h2>
<p>If you need a good syntax highlight for your code, check the <a title="Good plugins" href="plugins.html#highlightjs-prismjs">Plugins</a> section.</p>The tag <blockquote>
Simplicity is the ultimate sophistication.
- Leonardo Da Vinci
The lists
Use standard <ul>, <ol> and <dl> tag.
Unordered list look like this:
- Italy
- Norway
- Switzerland
- United Kingdom
- United States
Ordered list look like this:
- Italy
- Norway
- Switzerland
- United Kingdom
- United States
And definition list look like this:
- What do we want?
- Our data.
- When do we want it?
- Now.
- Where is it?
- We are not sure.
The tag <figure>
Text-level semantics
The tag <em> is for stress emphasis.
The tag <i> is for alternate voice or mood.
The tag <strong> is for important piece of content.
The tag <small> is for side comments.
The tag <kbd> is for keyboard command like ctrl + c.
The tag <sup> is for superscript Sup©.
The tag <sub> is for subscript Sub®.
The tag <mark> is for a run of text in one document marked or highlighted for reference purposes.
Edits
The tag <ins> is for inserted piece of content.
The tag <del> is for deleted piece of content.
Embedded
The tag <img>
The tag <audio>
"New Beginning" music by Twisterium/freebackgroundtracks.net is licensed under Creative Commons license Attribution-ShareAlike 4.0 International.
The tag <video>
Video by José Manuel de Laá from Pixabay.
Tabular
| Name | Quantity | Price |
|---|---|---|
| CMS | 1 | 1.200,00 € |
| Theme | 1 | 800,00 € |
| Plugin | 8 | 800,00 |
| Total | 10 | 2.800,00 € |
Forms
Form with fieldset tag look like this:
Form without fieldset tag look like this:
Interactive
The details and summary tag
Copying... 25%
- Transfer rate:
- 452KB/s
- Local filename:
- /home/rpausch/raycd.m4v
- Remote filename:
- /var/www/lectures/raycd.m4v
- Duration:
- 01:16:27
- Color profile:
- SD (6-1-6)
- Dimensions:
- 320×240
Sections
Navigation
In <nav> element use unordered list if you want horizontal menu. Otherwise you can use ordered list for vertical menu.
Horizonthal navigation
This is good choose for main menu.
Vertical navigation
This is good choose for table of content.
Address
Addresses are also styled to be awesome!
john.doe@example.com778-330-2389
666-666-6666
Headings
H1 - H6 represent headings for their sections.