CSS Preview

Please note:
This page is designed to display all the various styles that can be employed when editing your documents, and what the expected outcome will be.

Example 1: <h1> header with the unordered and ordered list and various text styles

Styles such as Strong, Emphasis and link colors on the various elements are shown below as they would appear in your documents. Also shown is an example of the Ordered List, using the <ol> tag.

Header 1 Header Example in a Link

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam sagittis lectus tempor ante. Donec ante. Vivamus viverra libero ac nisi. Aliquam scelerisque felis vel nulla. Proin mollis, diam eu cursus posuere, urna urna eleifend dui, ut eleifend velit ante ac tortor. Donec gravida tristique ipsum. Aenean ultricies mi eget lectus semper adipiscing.

  1. Item 1 with a link
  2. Item 2, displayed with the strong tag
  3. Item 3, displayed normally

Unordered lists:

Example 2: <h2> header with a <table>

This shows an example of a table, complete with the <caption> tag and <th> tag for the headers.

Header 2 Header Example in a Link

Curabitur lectus. Pellentesque posuere facilisis quam. Nam eget massa sed purus semper pretium. Praesent elementum enim quis leo. Vivamus diam leo, malesuada tempor, ultricies eget, tristique non, nisl. Cras non urna. Nullam consequat, lorem et egestas aliquet, mi metus condimentum nisl, non porttitor ipsum nulla sit amet magna. Nulla imperdiet vehicula nibh. Pellentesque dapibus porta nulla. Curabitur eros. Maecenas elementum placerat metus. Nulla mi metus, facilisis in, viverra sed, pharetra sed, magna. Nulla rhoncus tortor quis ipsum. Nulla ut arcu.

Caption for table
Test Header 1 Test Column 1 Test Column 2 Test Column 3
Test Header 2 Test Column 4 Test Column 5 Test Column 6

Example 3: <h3> header with the <blockquote> tag

An example of indented or quoted text using the <blockquote> tag

Header 3 Header Example in a Link

Nam augue. Vivamus sed massa. Curabitur risus dui, malesuada sit amet, facilisis et, porttitor ac, risus. Nullam sed urna. Nulla viverra nisi at lorem fermentum scelerisque. Pellentesque augue lectus, consequat non, placerat vitae, iaculis quis, nulla. Nulla semper.

Phasellus tellus. Ut odio. Aenean eros augue, congue ac, porttitor et, faucibus consequat, lorem. Integer nec nunc at orci fermentum sagittis. Mauris enim urna, laoreet sit amet, facilisis sed, laoreet a, urna. Nam bibendum, velit at pretium eleifend, ligula elit rutrum pede, vitae tristique arcu purus sit amet arcu. Cras in urna. Suspendisse potenti.

Example 4: <h4> header with the <hr />

An example of the Horizontal Rule <hr /> tag is shown below this help message, before we do the h5 tag.

Header 4 Header Example in a Link

Nunc vitae turpis. Cras lectus diam, dapibus eget, vehicula ut, suscipit eu, massa. Phasellus sodales dui at ligula. Proin posuere vehicula sapien. Mauris risus urna, ullamcorper sit amet, posuere at, feugiat vitae, libero. Suspendisse tempor, ipsum vitae sodales suscipit, lectus erat pretium nisl, vitae mollis mauris enim et purus. Maecenas massa ligula, hendrerit id, posuere non, placerat eget, enim. Duis dignissim porttitor nisi. Morbi nec justo. Mauris malesuada sapien quis sapien. Etiam scelerisque purus sed lorem. Sed accumsan varius enim. Vivamus pharetra sem eu nisi mollis tincidunt.


Example 5: <h5> header with an image.

An image is placed in the text.

Header 5 Header Example in a Link

Nulla magna. Suspendisse potenti. Vivamus est. Maecenas aliquam ligula sed turpis. Suspendisse turpis. Cras eros justo, pretium sit amet, fermentum ut, laoreet sed, dui. Proin tempor dui eu lectus. Curabitur quis lacus. Etiam porta odio. Mauris congue sagittis pede. Sed at lectus. Nam ut nisl pretium diam placerat lacinia.

Example 6: <h6> header with an superscript <sup> and subscript <sub> tags.

Both the <sup> and <sub> tags are demonstrated here.

Header 6 Header Example in a Link

Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2. Aliquam sagittis lectus tempor ante abc. Donec ante. Vivamus viverra libero ac nisi. Aliquam scelerisque felis vel nulla. Proin mollis, diam eu cursus posuere, urna urna eleifend dui, ut eleifend velit ante ac tortor 3. Donec gravida tristique ipsum. Aenean ultricies mi eget lectus semper adipiscing 4.

4 Image checks:

Please ensure the following images are correct:

  1. logo.gif
  2. logoEmail.gif
  3. logoRSS.gif
  4. printLogo.gif

logo.gif - normal logo for website
logo.gif

 

logoEmail.gif - Normal logo, white background
logoEmail.gif

 

logoRSS.gif - Normal logo, white background
logoRSS.gif

 

printLogo.gif - greyscale version of logo, white background
printLogo.gif

Forms

This shows an example of a form with submit button.

Form Legend Here

 
© 2012 Press Council of Ireland and Office of the Press Ombudsman
  • 1, 2 & 3 Westmoreland Street Dublin 2 Ireland. 
  • Phone: +353 1 6489130
  • Fax: +353 1 6740046
  • Email: info@presscouncil.ie

Search

Search - Use spaces to separate your keywords