This is the typography test card, showing all the things you can do with typography. You are currently reading a paragraph. Genshi uses rem as the size and spacing unit, so things will flow even if you change this value.

You want more paragraphs? Let’s quote Wikipedia!

Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

CSS is designed to enable the separation of content and presentation, including layout, colors, and fonts. This separation can improve content accessibility, since the content can be written without concern for its presentation; provide more flexibility and control in the specification of presentation characteristics; enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the structural content; and enable the .css file to be cached to improve the page load speed between the pages that share the file and its formatting.

Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternative formatting if the content is accessed on a mobile device.

Links

Links will use the Genshi style and color by default. For example:

Star us on GitHub

Headings

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading

Level 6 Heading

Inline elements

Here are some inline tags supported by Genshi.

Code blocks

Add code blocks with the <pre> tag:

<div class="GenshiCols">
  <div>
    Column...
  </div>
  <div>
    Column...
  </div>
  <div>
    Column...
  </div>
</div>

However, if you want your code tag to stand out, you will have to add the .code tag:

<div class="GenshiCols">
  <div>
    Column...
  </div>
  <div>
    Column...
  </div>
  <div>
    Column...
  </div>
</div>

Blockquotes

Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.

— MDN, source

Lists