Test CSS

This is a page to show you the various options in terms of CSS you can use on this website.

Boxed content

This is a sample paragraph inside div with class box.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Sed ut perspiciatis unde omnis

This is a sample paragraph inside div with class box.

A box with an orange background 

Duis ut diam quam nulla. Vitae turpis massa sed elementum tempus egestas sed sed risus. Nisi lacus sed viverra tellus in hac habitasse platea.

A box with light blue background 

Duis ut diam quam nulla. Vitae turpis massa sed elementum tempus egestas sed sed risus. Nisi lacus sed viverra tellus in hac habitasse platea.

A box with white background

Duis ut diam quam nulla. Vitae turpis massa sed elementum tempus egestas sed sed risus. Nisi lacus sed viverra tellus in hac habitasse platea.


This is a header

This shows the space beneath a heading and before a paragraph

Styles

This is a sentence in bold

This is a sentence in italics.

This is a sentence that is underlined.

This is what an external link looks like. And this is what an internal link looks like.

Tables

Example of a Table with the top row as header

This is how the paragraph spacing works before a table.

Sample Column A Sample Column B Sample Column C
Row A Here is a bulleted list within a column with

  • item a
  • item b
  • item c

This happens after a list ends within a cell.

Row A
Row B Row B Row B

Example of a Table without a header row

This is how the paragraph spacing works before a table.

Sample Column A Sample Column B Sample Column C
Row A Here is a bulleted list within a column with

  • item a
  • item b
  • item c

This happens after a list ends within a cell.

Row A
Row B Row B Row B

Example of a 3 column table

Header 1 Header 2 Header 3
Etiam et nisi pulvinar odio varius rutrum a et felis.  124533  $19,090.00
Nunc tristique pretium erat, nec nisl facilisis vitae. 124533  $19,090.00
Mauris venenatis, risus vel viverra auctor, purus nibh tristique orci.  124533  $19,090.00
Mauris venenatis, risus vel viverra auctor, purus nibh tristique orci.  124533  $19,090.00
Mauris venenatis, risus vel viverra auctor, purus nibh tristique orci.  124533  $19,090.00

Example of a two column table

Header 1

Header 2

Etiam et nisi pulvinar odio varius rutrum a et felis.  124533
Nunc tristique pretium erat, nec nisl facilisis vitae. 124533
Mauris venenatis, risus vel viverra auctor, purus nibh tristique orci.  124533

Horizontal Rule

Here below is a horizontal rule


Columns (tables with only one row)

 

Test column

This is text in column A

Test column

This is text in column B

 

 

 

Headings and Text

Examples of headings and text

H1 – heading style

The law says that parents are responsible for financially supporting their dependent children. Dependent usually means until the child turns 18 and sometimes longer.

H2 – heading style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at felis in nulla suscipit lacinia.

id nisl at sem pellentesque molestie quis non mi. Suspendisse vitae ante mollis felis mattis tincidunt tincidunt id tortor.

Reduced width example. Can be previewed on pages which are longer than 673px.Ut velit ipsum, malesuada ut neque ut, ultricies pulvinar mauris. Vivamus facilisis dolor eget est aliquet, non fermentum nunc laoreet. Suspendisse potenti. Sed dictum ipsum elementum, volutpat orci id, imperdiet mi. Quisque vel ipsum eu lorem efficitur porttitor ac sit amet nibh

H3 – subheading style

Curabitur scelerisque viverra fringilla. Donec convallis arcu nec nunc mattis, sed rutrum neque pretium. Donec ut tincidunt felis, at convallis magna. Nullam interdum massa quis dui pulvinar, ut tristique nibh aliquet. Quisque mi diam, imperdiet non tellus a, faucibus cursus quam.

H4 – heading style

Integer condimentum tortor et nisi blandit blandit. Cras posuere aliquet sapien, non laoreet nisl semper et. Nam lectus turpis, venenatis eu odio vitae, scelerisque congue massa. Aliquam elementum massa sed turpis ultricies gravida. Duis blandit sapien orci, id dignissim est auctor nec. Pellentesque id venenatis purus. Duis ligula mi, luctus sit amet massa et, scelerisque laoreet est. Pellentesque et est maximus, pretium urna vel, facilisis libero. Duis elementum ante nec lorem mattis pulvinar

H5 – heading style

Sed pretium, risus quis posuere pharetra, tortor lectus tincidunt turpis, gravida bibendum justo est vel neque. Cras tristique leo sit amet enim scelerisque, at faucibus mi dignissim. Phasellus eu ullamcorper turpis. Phasellus ac nisi cursus, condimentum magna in, molestie nunc. Donec mattis nisi vel bibendum bibendum. Nullam ultrices, magna vel venenatis sodales, odio elit fermentum magna, et pulvinar est mauris eget felis.

H6 – SUBHEADING

Ut lobortis, risus at porttitor euismod, turpis neque auctor leo, in mattis tellus dolor ac purus. Nam accumsan odio velit, mattis aliquam elit pretium eu. Integer rhoncus blandit lectus, sed pretium purus tincidunt blandit. Mauris vitae tincidunt nulla. Ut vel vulputate sapien. Vestibulum convallis augue tellus.

Images and images within paragraphs

Superior Court of Justice Courtroom Thumbnail Image
Superior Court of Justice

Ontario Court of Justice Courtroom Drawing Thumbnail ImageAenean ullamcorper feugiat augue, a venenatis erat consequat accumsan. Quisque vitae justo non eros iaculis porttitor. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas vehicula lectus et augue congue vestibulum. Aenean ullamcorper feugiat augue, a venenatis erat consequat accumsan. Quisque vitae justo non eros iaculis porttitor. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas vehicula lectus et augue congue vestibulum.

Ontario Court of Justice Courtroom Drawing Thumbnail ImageAenean ullamcorper feugiat augue, a venenatis erat consequat accumsan. Quisque vitae justo non eros iaculis porttitor. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas vehicula lectus et augue congue vestibulum. Aenean ullamcorper feugiat augue, a venenatis erat consequat accumsan. Quisque vitae justo non eros iaculis porttitor. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas vehicula lectus et augue congue vestibulum.

Aenean ullamcorper feugiat augue, a venenatis erat consequat accumsan. Quisque vitae justo non eros iaculis porttitor. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas vehicula lectus et augue congue vestibulum.

List styles

This is an unordered list

  • Element 1
  • Element 2
  • Element 3

This is an ordered list

  1. Element 1
  2. Element 2
  3. Element 3

This is a list within a list or sub-bullets

  • First Level
    • Second level
    • Second level
    • Second level.Note the problematic extra space below this bullet which screws up display
  • First Level again
  • First level again

Under this sentence is a horizontal rule

Example of an ordered list with hyperlinks

This is an ordered list with a hyperlink that is external: Note that within ordered and unordered list the yellow arrow indicating an external link does not appear and this should be fixed.

  1. Element 1
  2. Element 2
  3. Element 3

More List Options including sub bullets

Aliquam dictum odio turpis, quis congue sapien condimentum non. Aenean quis mauris vestibulum, pulvinar nibh eu, lacinia nisl.

  • Etiam et nisi pulvinar odio varius rutrum a et felis.
  • Nunc erat, nec auctor nisl facilisis vitae.
  • Risus vel viverra auctor, purus nibh tristique orci, a congue odio nibh.
    • Aliquam erat volutpat.
    • Mauris viverra vitae diam vitae condimentum
    • Donec non diam a tortor sodales ultrices.
      • Etiam et nisi pulvinar odio varius rutrum a et felis.
      • Nunc tristique pretium erat, nec auctor nisl facilisis vitae.
  1. Etiam et nisi pulvinar odio varius rutrum a et felis.
  2. Nunc tristique pretium erat, nec auctor nisl facilisis vitae.
  3. Mauris venenatis risus vel viverra auctor, purus nibh tristique orci, a congue odio enim aliquet nibh.
    • Aliquam erat volutpat.
    • Mauris viverra vitae diam vitae condimentum
    • Donec non diam a tortor sodales ultrices.
      • Etiam et nisi pulvinar odio varius rutrum a et felis.
      • Nunc tristique pretium erat, nec auctor nisl facilisis vitae.
  • Etiam et nisi pulvinar odio varius rutrum a et felis.
  • Nunc tristique pretium erat, nec nisl facilisis vitae.
  • Mauris venenatis, risus vel viverra auctor, purus nibh tristique orci.
    • Aliquam erat volutpat.
    • Mauris viverra vitae diam vitae condimentum
    • Donec non diam a tortor sodales.
      1. Aliquam erat volutpat.
      2. Mauris viverra vitae condintum
      3. Diam a tortor sodales ultrices.

Text Sizes

Standart text: Mauris venenatis, risus vel viverra auctor, purus nibh tristique orci, a congue odio enim aliquet nibh. Aliquam erat volutpat. Mauris viverra vitae diam vitae condimentum. Maecenas semper elit vel odio tempus hendrerit.

Large text: Nunc odio nunc, fringilla volutpat lectus eu, dignissim pharetra nulla. Donec non diam a tortor sodales ultrices. Phasellus quis scelerisque tortor, id vehicula mi.

Small text: Mauris consectetur turpis erat, in tincidunt risus iaculis eget. Nam pellentesque sed sapien sed rutrum. Morbi a scelerisque sapien, non congue augue. Sed egestas ornare nisl vitae egestas. Nunc semper purus neque, non sodales ante efficitur ac.

Italics text: Mauris consectetur turpis erat, in tincidunt risus iaculis eget. Nam pellentesque sed sapien sed rutrum. Morbi a scelerisque sapien, non congue augue. Sed egestas ornare nisl vitae egestas. Nunc semper purus neque, non sodales ante efficitur ac.

Accordion

Form
Hide this website