Test CSS

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

This is a normal paragraph. You can see how long the sentence is and how it breaks

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.

When it moves to the next line.

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.

Heading 1

Heading 2 and this is what it looks like if this heading is really long and might wrap to two lines as the spacing needs to be appropriate in that case as we do have long sub-headings

Heading 3

Heading 4

Heading 5
Heading 6

Example of a Table

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

This is how the paragraph works after a table.Note the problem of text being too close to the bottom of the table above. There needs to be break built into the CSS for default tables but not having that I have inserted a horizontal line under them.

Here below is a horizontal rule

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

 

 

 


Images

Test column

This is text in column A

Test column

This is text in column B

Testing to show how to highlight Resources and Guided Pathways

This is a test question with a test Resource and Guided Pathways button.

Test resource button

Test resource icon

Test Guided pathways button

Test guided pathways button:

External link icon testing:

Pour être admissible au POSPH vous devez avoir besoin d’une.
Pour être admissible au POSPH vous devez avoir besoin d’une.
Pour être admissible au POSPH vous devez avoir besoin d’une.
Pour être admissible au POSPH vous devez avoir besoin d’une.

Glossary testing

An example of normal text to show how the glossary works

When you make a will you decide things like who:

  • is the person who will carry out the directions in your will, called your estate trustee
  • are the people and organizations you want to leave your property to, called your beneficiaries
  • will care for your children who under the age of 18

Manually adding a glossary term to a word that is different than the original term

Please note that while I can make the bubble show up in yellow below, it won’t load the glossary term because the glossary doesn’t work on pages but this coding does work on questions and steps.

word that is not estate trustee

Manually hiding a term from being glossified

estate trustee

Hide this website