Skip to Local Navigation
Skip to Content
California State University, Long Beach
University Template Project Secondary Banner Example
Print this pageAdd this page to your favoritesSelect a font sizeSelect a small fontSelect a medium fontSelect a large font
 

Heading and Layout Element Samples

This paragraph is using the "caption" class. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat.

PLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi.

This sentence is using the "pre" HTML element.

datestamp class used here: April 13, 2007

This is using h2. Ut wisis enim ad minim veniam, quis nostrud exerci tution

Sample Image of a hand holding a bookLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper

"This is using the quote-left class. ullam commodo consequat."

suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.

"This is using quote-right class. In hendrerit in vulputate molestie consequat."

This is using h3. Minim veniam, quis nostrud exerci tution

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.

This is using h4. Ut wisis enim ad minim veniam, consectetuer adipiscing quis nostrud exerci tution

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat tution ullam Sample Image of a hand holding a bookcorper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat.

This paragraph is using the "caption" class.
This paragraph is using the "footnote" class. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat.
This is using h5. Quis nostrud exerci tution

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi.

This is using h6. Quis nostrud exerci tution

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi.

  • Unordered List item 1
  • Unordered List item 1
  • Unordered List item 1

Simple paragraph here: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit.

  1. Ordered List item 1
  2. Ordered List item 1
  3. Ordered List item 1

Simple paragraph here: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat. Duis te feugi facilisi.

Other HTML Elements

dfn

Example: Lorem ipsum dolor sit amet, words using "dfn" elit, sed diem nonummy nibh euismod.

cite & acronym

Example: This paragraph introduces a book, How to Code Well, by Robert Martinez, is a great primer for learning HTML and CSS.

Blackbox Class

Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit.

Darkgraybox Class

Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit.

Graybox Class

Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit.

Whitebox Class

Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit.

Goldbox Class

Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit.

Gradientbox Class

Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit.

This paragraph is using the "note" class. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh.

Semantic Heading Samples