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.com+ 778-330-2389
+ 666-666-6666
+ + +
+ + + +
Headings
+ +H1 - H6 represent headings for their sections.
+ +Level 1 Heading
+Level 2 Heading
+Level 3 Heading
+Level 4 Heading
+Level 5 Heading
+Level 6 Heading
+ ++ +