This is a page of styled and non-styled content. It can be used as a reference for future modifications to this site.
Header 1 <h1>
Header 2 <h2>
Header 3 <h3>
Header 4 <h4>
Header 5 <h5>
Header 6 <h6>
Basic Content
This is a link, acronym,
deleted text, emphasized text, underlined text, strong text.
Paragraph and Text formatting
Basic Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo. Praesent semper nisl hendrerit enim. Phasellus laoreet. Fusce vel nulla. Pellentesque lectus. Pellentesque accumsan lobortis ante. Sed at mauris. Vivamus cursus sem in nisi. Nunc gravida ipsum ut tellus. Nam luctus purus non enim. Quisque commodo risus a nibh. Sed tellus mauris, lobortis et, vestibulum ac, vestibulum at, quam. Integer nonummy est. Morbi dui elit, tincidunt ac, cursus sed, tempus eu, magna. Cras quis pede.
Text with large First Letter - To make a paragraph with large first letter (doesn't work in IE) add class "first letter" to the p tag surrounding the content wanted. <p class="firstletter">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo. Praesent semper nisl hendrerit enim. Phasellus laoreet. Fusce vel nulla. Pellentesque lectus. Pellentesque accumsan lobortis ante. Sed at mauris. Vivamus cursus sem in nisi. Nunc gravida ipsum ut tellus. Nam luctus purus non enim. Quisque commodo risus a nibh. Sed tellus mauris, lobortis et, vestibulum ac, vestibulum at, quam.
Indented Text - To make a paragraph indented add class "indent" to the p tag surrounding the content wanted. <p class="indent">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo. Praesent semper nisl hendrerit enim. Phasellus laoreet. Fusce vel nulla. Pellentesque lectus. Pellentesque accumsan lobortis ante. Sed at mauris. Vivamus cursus sem in nisi.
All Caps -To make text all caps add the class "allcaps" to the tag enclosing the text wanted. <p class="allcaps">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo.
Green Text - To make text orange simply add the class "green" to the tag enclosing the text wanted. <p class="green">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo.
Blue Text - To make text orange simply add the class "blue" to the tag enclosing the text wanted. <p class="blue">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo.
public class Main {
public static void main(String[] args) {
//prints "Hello World!"
System.out.println("Hello World!");
}
}
Lists
- This is an ordered list
- Eggs
- Mlik
- Flour
- Wheat
- White
- Etc.
- Sugar
- This is an unordered list
- Eggs
- Mlik
- Flour
- Wheat
- White
- Etc.
- Sugar
- Definition List
- Can be used for all your definition list needs.
- Lorem ipsum
- Phasellus laoreet. Fusce vel nulla.
- Integer nonummy
- Cum sociis natoque penatibus et magnis dis parturient montes.
- Phasellus varius
- Phasellus varius magna vitae ligula.
Quoting
Blockquote
To make a blockquote add class "blockquote" to the div tag surrounding the content wanted in the blockquote. <div class="blockquote">To make a blockquote title simply inclose the title like this - <h5>Title</h5>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo. Praesent semper nisl hendrerit enim. Phasellus laoreet. Fusce vel nulla. Pellentesque lectus. Integer nonummy est. Morbi dui elit, tincidunt ac, cursus sed, tempus eu, magna. Cras quis pede. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In adipiscing dignissim diam. Vestibulum consectetuer risus faucibus sem. Phasellus varius magna vitae ligula. Nam volutpat sapien ut justo. Robobuilder on September 10th, 2006
Floating
Two-Column Paragraphs
To make a paragraph float left at 50% width
add class "floatleft w50" to the div tag
<div class="floatleft w50">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo.
Praesent semper nisl hendrerit enim. Phasellus laoreet. Fusce vel
nulla. Pellentesque lectus. Pellentesque accumsan lobortis ante. Sed
at mauris. Vivamus cursus sem in nisi. Nunc gravida ipsum ut tellus.
Nam luctus purus non enim. Quisque commodo risus a nibh. Sed tellus mauris,
lobortis et, vestibulum ac, vestibulum at, quam. Integer nonummy est.
Morbi dui elit, tincidunt ac, cursus sed, tempus eu, magna.
To make a paragraph float right at 50% width
add class "floatright w50" to the div tag
<div class="floatright w50">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo.
Praesent semper nisl hendrerit enim. Phasellus laoreet. Fusce vel
nulla. Pellentesque lectus. Pellentesque accumsan lobortis ante. Sed
at mauris. Vivamus cursus sem in nisi. Nunc gravida ipsum ut tellus.
Nam luctus purus non enim. Quisque commodo risus a nibh. Sed tellus mauris,
lobortis et, vestibulum ac, vestibulum at, quam. Integer nonummy est.
Morbi dui elit, tincidunt ac, cursus sed, tempus eu, magna.
Images
Floating Images
An Image that floats left
To make a image float left add class "floatleft" to the img tag
<img src="images/yourimagename.jpg" alt="" class="floatleft">
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Nullam justo. Praesent semper nisl hendrerit enim. Phasellus laoreet.
Fusce vel nulla. Pellentesque lectus. Pellentesque accumsan lobortis ante.
Sed at mauris. Vivamus cursus sem in nisi. Nunc gravida ipsum ut tellus.
Nam luctus purus non enim. Quisque commodo risus a nibh. Sed tellus mauris,
lobortis et, vestibulum ac, vestibulum at, quam. Integer nonummy est.
Morbi dui elit, tincidunt ac, cursus sed, tempus eu, magna. Cras quis
pede. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus.
An Image that floats left
To make a image float right add class "floatright" to the img tag
<img src="images/YourImageName.jpg" alt="" class="floatright">
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Nullam justo. Praesent semper nisl hendrerit enim. Phasellus laoreet.
Fusce vel nulla. Pellentesque lectus. Pellentesque accumsan lobortis ante.
Sed at mauris. Vivamus cursus sem in nisi. Nunc gravida ipsum ut tellus.
Nam luctus purus non enim. Quisque commodo risus a nibh. Sed tellus mauris,
lobortis et, vestibulum ac, vestibulum at, quam. Integer nonummy est.
Morbi dui elit, tincidunt ac, cursus sed, tempus eu, magna. Cras quis
pede. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus.
Forms
This is a form. Unfortunately, the radio buttons and checkboxes have weird borders in IE. Give them the noborder class to eliminate this.
Tables
Table titles are added with a <h5> tag around the title and a <br /> at the end of the other lines of content to add a line break.
Table Title 1Lorem ipsum dolor sit amet,consectetuer adipiscing elit sed at Suspendisse vulputate sed mauris |
Table Title 2Lorem ipsum dolor sit amet,consectetuer adipiscing elit Suspendisse vulputate |
Table Title 3Lorem ipsum dolor sit amet,consectetuer adipiscing elit Suspendisse vulputate |
Table Title 4Lorem ipsum dolor sit amet,Suspendisse vulputate |