Tags
This is a page of styled and non-styled content. It can be used as a reference for future modifications to this site. For more color add the class "blue" to an element
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.
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.
Blue Text - To make text blue 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
A blockquote.
A warning blockquote
A blue message.
A notice blockquote.
A go blockquote.
Floating
Two-Column Paragraphs
To make a paragraph float left at 50% width add class "left 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 "right 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 "left" to the img tag <img src="images/yourimagename.jpg" alt="
website template image" class="left">
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 "right" to the img tag <img src="images/YourImageName.jpg" alt="
website template image" class="right">
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.