H1 header
H2 header
H3 header
H4 header
H5 header
Quotations and Code
Inline quotations can be defined by using the <q> element
.
The <blockquote> element defines a long quotation which also creates a new block by inserting white space before and after the blockquote element.
To define a short inline computer code use the <code> element. For a larger code snippet use the <pre> element which defines preformatted text. It creates a new text block which preserves both spaces and line breaks.
pre {
margin: 15px 0;
padding: 10px;
font-family: "Courier New", Courier, monospace;
font-size: 12px;
line-height: 18px;
white-space: pre-wrap;
}
Use the <small> element for side comments and small print.
Drop caps are the first letter of a paragraph which are displayed bigger than the rest of the text. You can create a drop cap using the CSS class dropcap.
Create this drop cap using the CSS class dropcap_color.
The first letter will be blue.
For such drop cap use the CSS class dropcap_colorbgr.
The background of first letter will be blue.
Tables
Create a zebra stripped table using using the CSS class zebra.
| Table Heading | Table Heading | Table Heading |
|---|---|---|
| Table Footer | Table Footer | Table Footer |
| Table Data | Table Data | Data Centered |
| Data Bold | Table Data | Data Centered |
| Table Data | Table Data | Data Centered |
Definition Lists
Create a nice looking definition list separated with a line by using the CSS class separator.
- Definition List
- A definition list is a list of terms and corresponding definitions. To create a definition list use the <dl> element in conjunction with <dt> to define the definition term and <dd> to define the definition description.
- Definition Term
- This is a definition description.
- Definition Term
- This is a definition description.
- This is another definition description.
Forms
Create a clearly arranged form layout with fieldset boxes using the CSS class box.