Information Services Web development centre

Page elements

The examples on this page demonstrate the styling of structural html elements that have had styles applied to them.


The "notice" style

The "notice" style applies a background colour and dotted line border to create a highlight around the selected content.

Example:

This is a highlighted notice that appears in the content section of the page. It stands out from the rest of the page by its background colour and dotted line border. To apply this style select the class notice from the list of styles.

Instructions:

Apply the class notice to paragraphs or divs. This class only applies to the paragraph <p> or <div> tag.

The "importantnotice" style

The "importantnotice" style applies a background colour, red text and dotted line border to create a highlight around the selected content.

Example:

This is a highlighted notice that appears in the content section of the page. It stands out from the rest of the page by its background colour, red text and dotted line border. To apply this style select the class importantnotice from the list of styles.

Instructions:

Apply the class importantnotice to paragraphs or divs. This class only applies to the paragraph <p> or <div> tag.

Subsection indent

Use the Subsection indent style to indent text. This helps break up large bodies of text and make them easier to read.

In particular, this style is preferred to the use of the blockquote tag. Blockquote should only be used when actually quoting sections of text.

Example:

The subsections of this page use the subsection indent.

Instructions:

Apply the class subsection to a div containing all the elements you want indented. This class only applies to the <div> tag.

Side note: alignright

Example:

This block uses the alignright style combined with the notice style.

Use the alignright style to float a small block to the right side of the content area. This is useful for notes and pull quotes. The body of text will flow around the floated div.

Instructions:

Apply the class alignright to a div containing all the elements you want pushed right. This class only applies to the <div> tag.

Arrows

The next and back link styles are useful to distinguish links to sequential or related webpages.

Example:

back 
next

Instructions:

Apply the class back-link or next-link to links. This class only applies to the link <a> tag.

top of page