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
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
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
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.
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.
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
- Element 1
- Element 2
- 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.
- Element 1
- Element 2
- 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.
- Etiam et nisi pulvinar odio varius rutrum a et felis.
- Nunc tristique pretium erat, nec auctor nisl facilisis vitae.
- 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.
- Aliquam erat volutpat.
- Mauris viverra vitae condintum
- 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.
