CSS basic elements

The purpose of this HTML is to help determine which default settings are used within the CSS, and to make sure all possible HTML elements are included when designing a site.


Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum strong sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Highlighted paragraph consectetuer adipiscing elit. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

List Item 1

List Item 2

List Item 3

Highlighted paragraph consectetuer adipiscing elit. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.


Truncated text

You can limit text to one line and add an ellipsis by adding

class="truncate"
to a block-level element.

Truncate applied to a div

A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class.
<!-- START truncate-text-div component -->
<div class="truncate">A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class.</div>
<!-- END truncate-text-div component -->

Truncate applied to a paragraph

A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class. A long piece of text that has been truncated using the truncate class.


List types


Definition list

Definition list title 1
Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
Definition list title 2
Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonumm.
Definition list title 3
Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Ordered list

  1. Ullam est porro dolor ad sit et nisi quos autem similique reprehenderit reiciendis doloribus et nulla id quibusdam voluptatem molestias
  2. Maxime officiis et qui labore dolor voluptatem animi aperiam consequatur reiciendis quos voluptatem est ad expedita eos consequatur ratione consectetur
    1. Dolorum eos tempore autem quos reprehenderit dolore consequuntur dolores dolor aut consequatur consequatur est voluptatem est et aut incidunt quisquam
    2. Eveniet quos quaerat et excepturi harum exercitationem corrupti natus sit est nulla quo architecto quis perspiciatis qui quod quas ut
    3. Consequatur quas eum numquam reiciendis
  3. Non ut consectetur praesentium voluptas voluptas deleniti repellat vero et itaque illo amet earum sint sunt suscipit magni natus sed

Unordered list

  • Perspiciatis exercitationem distinctio pariatur debitis qui magnam et et et ut odit qui cumque ab nihil sed consequuntur dolores quas saepe quam consequatur dicta omnis
  • Sed modi quaerat odio at corrupti modi qui quos nulla voluptatem ducimus quo aut mollitia
  • Architecto iste a tempora tempora nostrum fugit sit quia consequatur eveniet soluta deleniti nihil sunt

Newspaper style vertically ordered list

  • Applying for courses
  • Agriculture, horticulture and veterinary studies
  • Area studies, languages and literature
  • Arts and crafts
  • Business and management
  • Construction
  • Education
  • Engineering and production
  • Environment
  • Family and personal care services
  • Food, leisure and hospitality
  • Humanities
  • Information technology
  • Librarianship
  • Media studies
  • Medicine and health studies
  • Science
  • Social sciences
  • Teaching
  • Transport

Tables

Officia omnis Et nam Aut temporibus maxime fuga deserunt fugit Temporibusquoset Vero animi Account status Actions
Aut illum Laborum doloremque quis Sit sit alias Et non veritatis
Delete
Cupiditate et Illo dolore ea Est vel esse Dolores sequi
Delete
Est facere Praesentium id totam Voluptatem provident itaque Harum consequatur odio
Delete
Repellendus doloremque Sapiente consequatur sapiente Veniam velit atque Et ducimus et
Delete
Est quo Perferendis veritatis cum Non maxime qui Quod eaque
Delete

Misc - abbr, acronym, pre, code, sub, sup, etc.

Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
- Blockquote

Media

Suscipit sit accusamus quos quae enim nostrum in perferendis natus voluptate iure qui. est qui officiis numquam qui esse dolorum atque quasi ea. nisi sit aut adipisci labore maiores esse ullam illum quaerat aut laudantium magni ullam ea. ea temporibus distinctio non reiciendis eius consectetur asperiores est magnam

Placeat consequatur ipsam velit cupiditate nulla maxime delectus rerum est aut nam. voluptatem architecto ab dolores accusantium quo dignissimos at consequatur. tempore nihil atque ipsa alias aut fuga voluptatum impedit soluta cupiditate veritatis. atque dolorem ducimus nihil corporis perferendis laboriosam similique numquam. magnam nihil dolores eos est et facere ut ad. mollitia amet minus animi facilis dolorem nam dignissimos voluptatibus provident beatae nam quod explicabo occaecati. officia quo consequuntur quaerat et facere asperiores beatae non adipisci voluptas sequi omnis ea repudiandae Deserunt et minus enim praesentium impedit deserunt cum necessitatibus est doloribus architecto saepe possimus. quia labore molestias quis praesentium ea explicabo earum facere. incidunt vero officiis incidunt sunt corporis voluptatum sed

Exercitationem exercitationem aut beatae autem aut maxime. sunt dolorem quia similique libero qui nobis est qui iste repellendus saepe. repellat sint facilis iste sunt error. modi est accusamus molestiae sint laborum. non omnis enim quibusdam odio adipisci sint facereCumque quaerat dolorem ratione rerum debitis architecto dolorum voluptas occaecati ut ut dolores. architecto eius ad non minus assumenda. quia numquam quos pariatur sed voluptates alias enim eum consequuntur at odio aut


Fieldsets, legends, and form elements

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.

Form elements

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.

Vel qui tempore suscipit hic cum nisi velit et minus.
Repellat similique aut aliquid quia dicta ut aut voluptate aperiam
Aut voluptas perferendis quo
Similique et tempora qui expedita sed saepe vel qui velit neque omnis.
Radio buttons (inline):
Radio buttons (block):
Checkboxes (inline):
Checkboxes (block):
Address:

Pagination