CSS Examples
When writing HTML code, one often has to deal with CSS styles in order to make things look nice. This page allows the developers of the NST project to experiment with different CSS options. This is useful when we need to discuss the choice of fonts, colors, etc.
One of the nightmares of dealing with web pages is that many client systems are not properly calibrated. The average computer user is unable to calibrate their system such that the DPI is set correctly.
Sadly, there are many web developers which don't understand the concepts of measurements used in CSS. The sites these developers work on are easily identified by fonts which are nearly impossible to read when using a computer system with a high DPI (like a laptop with a 15 inch screen and a 1600x1200 pixel resolution). The fundamental flaw is that developers on these sites specify font sizes in pixels. While a font size of 16 pixels might be readable on a 96 DPI display (which many assume), it is nearly unreadable on a 134 DPI display.
If your browser and computer system are calibrated correctly, you should see a 1 inch square and a 5 centimeter square in the table shown below (as well as the CSS and HTML used):
| CSS | HTML | Results |
|---|---|---|
.sq1in {
border: 1px solid green;
padding: 0;
margin: 4pt;
border-width: 1pt;
line-height: 72pt;
width: 72pt;
font-size: 36pt;
vertical-align: middle;
}
|
<p class="sq1in">1in</p> |
1in |
.sq5cm {
border: 1px solid green;
padding: 0;
margin: 4pt;
border-width: 1pt;
line-height: 5cm;
width: 5cm;
font-size: 1cm;
vertical-align: middle;
}
|
<p class="sq5cm">5cm</p> |
5cm |
The following can be used to estimate the DPI of a system which you know the resolution it is running at and the diagonal measurement of the viewable area of the screen.
The following table shows the same paragraph of font rendered in several different font families at several different sizes. NOTE: The examples shown fall back to the monospace font if the font family desired is not found.
| Style | In-line Appearance |
|---|---|
| font-family: arial, monospace; font-size: 8pt; |
This block of text is rendered using the arial font (or falling back to the monospace font if arial is not found at 8pt) |
| font-family: arial, monospace; font-size: 9pt; |
This block of text is rendered using the arial font (or falling back to the monospace font if arial is not found at 9pt) |
| font-family: arial, monospace; font-size: 10pt; |
This block of text is rendered using the arial font (or falling back to the monospace font if arial is not found at 10pt) |
| font-family: arial, monospace; font-size: 12pt; |
This block of text is rendered using the arial font (or falling back to the monospace font if arial is not found at 12pt) |
| font-family: arial, monospace; font-size: 14pt; |
This block of text is rendered using the arial font (or falling back to the monospace font if arial is not found at 14pt) |
| font-family: arial, monospace; font-size: 16pt; |
This block of text is rendered using the arial font (or falling back to the monospace font if arial is not found at 16pt) |
| font-family: courier, monospace; font-size: 8pt; |
This block of text is rendered using the courier font (or falling back to the monospace font if courier is not found at 8pt) |
| font-family: courier, monospace; font-size: 9pt; |
This block of text is rendered using the courier font (or falling back to the monospace font if courier is not found at 9pt) |
| font-family: courier, monospace; font-size: 10pt; |
This block of text is rendered using the courier font (or falling back to the monospace font if courier is not found at 10pt) |
| font-family: courier, monospace; font-size: 12pt; |
This block of text is rendered using the courier font (or falling back to the monospace font if courier is not found at 12pt) |
| font-family: courier, monospace; font-size: 14pt; |
This block of text is rendered using the courier font (or falling back to the monospace font if courier is not found at 14pt) |
| font-family: courier, monospace; font-size: 16pt; |
This block of text is rendered using the courier font (or falling back to the monospace font if courier is not found at 16pt) |
| font-family: cursive, monospace; font-size: 8pt; |
This block of text is rendered using the cursive font (or falling back to the monospace font if cursive is not found at 8pt) |
| font-family: cursive, monospace; font-size: 9pt; |
This block of text is rendered using the cursive font (or falling back to the monospace font if cursive is not found at 9pt) |
| font-family: cursive, monospace; font-size: 10pt; |
This block of text is rendered using the cursive font (or falling back to the monospace font if cursive is not found at 10pt) |
| font-family: cursive, monospace; font-size: 12pt; |
This block of text is rendered using the cursive font (or falling back to the monospace font if cursive is not found at 12pt) |
| font-family: cursive, monospace; font-size: 14pt; |
This block of text is rendered using the cursive font (or falling back to the monospace font if cursive is not found at 14pt) |
| font-family: cursive, monospace; font-size: 16pt; |
This block of text is rendered using the cursive font (or falling back to the monospace font if cursive is not found at 16pt) |
| font-family: fantasy, monospace; font-size: 8pt; |
This block of text is rendered using the fantasy font (or falling back to the monospace font if fantasy is not found at 8pt) |
| font-family: fantasy, monospace; font-size: 9pt; |
This block of text is rendered using the fantasy font (or falling back to the monospace font if fantasy is not found at 9pt) |
| font-family: fantasy, monospace; font-size: 10pt; |
This block of text is rendered using the fantasy font (or falling back to the monospace font if fantasy is not found at 10pt) |
| font-family: fantasy, monospace; font-size: 12pt; |
This block of text is rendered using the fantasy font (or falling back to the monospace font if fantasy is not found at 12pt) |
| font-family: fantasy, monospace; font-size: 14pt; |
This block of text is rendered using the fantasy font (or falling back to the monospace font if fantasy is not found at 14pt) |
| font-family: fantasy, monospace; font-size: 16pt; |
This block of text is rendered using the fantasy font (or falling back to the monospace font if fantasy is not found at 16pt) |
| font-family: helvetica, monospace; font-size: 8pt; |
This block of text is rendered using the helvetica font (or falling back to the monospace font if helvetica is not found at 8pt) |
| font-family: helvetica, monospace; font-size: 9pt; |
This block of text is rendered using the helvetica font (or falling back to the monospace font if helvetica is not found at 9pt) |
| font-family: helvetica, monospace; font-size: 10pt; |
This block of text is rendered using the helvetica font (or falling back to the monospace font if helvetica is not found at 10pt) |
| font-family: helvetica, monospace; font-size: 12pt; |
This block of text is rendered using the helvetica font (or falling back to the monospace font if helvetica is not found at 12pt) |
| font-family: helvetica, monospace; font-size: 14pt; |
This block of text is rendered using the helvetica font (or falling back to the monospace font if helvetica is not found at 14pt) |
| font-family: helvetica, monospace; font-size: 16pt; |
This block of text is rendered using the helvetica font (or falling back to the monospace font if helvetica is not found at 16pt) |
| font-family: monospace, monospace; font-size: 8pt; |
This block of text is rendered using the monospace font (or falling back to the monospace font if monospace is not found at 8pt) |
| font-family: monospace, monospace; font-size: 9pt; |
This block of text is rendered using the monospace font (or falling back to the monospace font if monospace is not found at 9pt) |
| font-family: monospace, monospace; font-size: 10pt; |
This block of text is rendered using the monospace font (or falling back to the monospace font if monospace is not found at 10pt) |
| font-family: monospace, monospace; font-size: 12pt; |
This block of text is rendered using the monospace font (or falling back to the monospace font if monospace is not found at 12pt) |
| font-family: monospace, monospace; font-size: 14pt; |
This block of text is rendered using the monospace font (or falling back to the monospace font if monospace is not found at 14pt) |
| font-family: monospace, monospace; font-size: 16pt; |
This block of text is rendered using the monospace font (or falling back to the monospace font if monospace is not found at 16pt) |
| font-family: serif, monospace; font-size: 8pt; |
This block of text is rendered using the serif font (or falling back to the monospace font if serif is not found at 8pt) |
| font-family: serif, monospace; font-size: 9pt; |
This block of text is rendered using the serif font (or falling back to the monospace font if serif is not found at 9pt) |
| font-family: serif, monospace; font-size: 10pt; |
This block of text is rendered using the serif font (or falling back to the monospace font if serif is not found at 10pt) |
| font-family: serif, monospace; font-size: 12pt; |
This block of text is rendered using the serif font (or falling back to the monospace font if serif is not found at 12pt) |
| font-family: serif, monospace; font-size: 14pt; |
This block of text is rendered using the serif font (or falling back to the monospace font if serif is not found at 14pt) |
| font-family: serif, monospace; font-size: 16pt; |
This block of text is rendered using the serif font (or falling back to the monospace font if serif is not found at 16pt) |
| font-family: sans-serif, monospace; font-size: 8pt; |
This block of text is rendered using the sans-serif font (or falling back to the monospace font if sans-serif is not found at 8pt) |
| font-family: sans-serif, monospace; font-size: 9pt; |
This block of text is rendered using the sans-serif font (or falling back to the monospace font if sans-serif is not found at 9pt) |
| font-family: sans-serif, monospace; font-size: 10pt; |
This block of text is rendered using the sans-serif font (or falling back to the monospace font if sans-serif is not found at 10pt) |
| font-family: sans-serif, monospace; font-size: 12pt; |
This block of text is rendered using the sans-serif font (or falling back to the monospace font if sans-serif is not found at 12pt) |
| font-family: sans-serif, monospace; font-size: 14pt; |
This block of text is rendered using the sans-serif font (or falling back to the monospace font if sans-serif is not found at 14pt) |
| font-family: sans-serif, monospace; font-size: 16pt; |
This block of text is rendered using the sans-serif font (or falling back to the monospace font if sans-serif is not found at 16pt) |
| font-family: times, monospace; font-size: 8pt; |
This block of text is rendered using the times font (or falling back to the monospace font if times is not found at 8pt) |
| font-family: times, monospace; font-size: 9pt; |
This block of text is rendered using the times font (or falling back to the monospace font if times is not found at 9pt) |
| font-family: times, monospace; font-size: 10pt; |
This block of text is rendered using the times font (or falling back to the monospace font if times is not found at 10pt) |
| font-family: times, monospace; font-size: 12pt; |
This block of text is rendered using the times font (or falling back to the monospace font if times is not found at 12pt) |
| font-family: times, monospace; font-size: 14pt; |
This block of text is rendered using the times font (or falling back to the monospace font if times is not found at 14pt) |
| font-family: times, monospace; font-size: 16pt; |
This block of text is rendered using the times font (or falling back to the monospace font if times is not found at 16pt) |
The HTML <span> element can be used to adjust the appearance of text withing a document. The following table shows some example styles applied to the phrase Style Applied To This (0123).
| Style | In-line Appearance |
|---|---|
| color: green; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style color: green; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| background-color: #ffdddd; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style background-color: #ffdddd; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| color: white; background-color: #440000; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style color: white; background-color: #440000; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| font-family: monospace; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style font-family: monospace; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| font-family: Arial, monospace; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style font-family: Arial, monospace; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| font-family: Helvetica, monospace; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style font-family: Helvetica, monospace; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| font-family: Times, monospace; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style font-family: Times, monospace; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| font-style: normal; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style font-style: normal; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| font-style: italic; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style font-style: italic; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| font-style: oblique; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style font-style: oblique; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| font-size: 16pt; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style font-size: 16pt; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| font-size: 16px; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style font-size: 16px; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| font-size: 16mm; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style font-size: 16mm; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| font-variant: normal; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style font-variant: normal; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| font-variant: small-caps; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style font-variant: small-caps; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| font-weight: normal; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style font-weight: normal; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| font-weight: bold; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style font-weight: bold; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| font-weight: bolder; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style font-weight: bolder; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| font-weight: lighter; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style font-weight: lighter; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| letter-spacing: 3mm; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style letter-spacing: 3mm; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| line-height: 5mm; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style line-height: 5mm; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| text-decoration: none; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style text-decoration: none; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| text-decoration: overline; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style text-decoration: overline; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| text-decoration: underline; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style text-decoration: underline; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| text-decoration: line-through; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style text-decoration: line-through; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| text-transform: none; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style text-transform: none; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| text-transform: capitalize; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style text-transform: capitalize; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| text-transform:lowercase; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style text-transform:lowercase; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| text-transform:uppercase; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style text-transform:uppercase; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| vertical-align:baseline; font-size:8pt; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style vertical-align:baseline; font-size:8pt; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| vertical-align:sub; font-size:8pt; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style vertical-align:sub; font-size:8pt; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| vertical-align:super; font-size:8pt; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style vertical-align:super; font-size:8pt; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| vertical-align:top; font-size:8pt; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style vertical-align:top; font-size:8pt; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| vertical-align:text-top; font-size:8pt; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style vertical-align:text-top; font-size:8pt; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| vertical-align:middle; font-size:8pt; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style vertical-align:middle; font-size:8pt; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| vertical-align:bottom; font-size:8pt; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style vertical-align:bottom; font-size:8pt; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| vertical-align:text-bottom; font-size:8pt; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style vertical-align:text-bottom; font-size:8pt; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| margin:5mm; background-color: yellow; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style margin:5mm; background-color: yellow; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
| padding:5mm; background-color: yellow; | Here is a sample HTML paragraph of text. Within this paragraph, we will apply the style padding:5mm; background-color: yellow; to the test Style Applied To This (0123). Here is what it looks like |Style applied to this (0123)|. Notice how the style was applied in-line. That is it affects the look of the text within the paragraph (we are still within the same 'flow' of text). |
In general, one should NEVER use the style attribute to apply text styles to blocks of text. You should ALWAYS prefer using the class attribute and using a separate style sheet. For example, most of the styles used by the pages at this web site can be found in a single file ../css/site.css.
By using the class attribute, you provide a degree of separation between your content and its presentation. This makes managing the presentation MUCH easier in the long run as you will only need to update the style information in one location.
For example, lets assume we have defined the horse class in a style sheet as follows:
.horse {
font-family: Helvetica;
font-weight: bold;
color: white;
background-color: #694f31;
font-size: 120%;
}
We might then write the following HTML code to make use of the horse class:
<h2>The <span class="horse">Pinto</span></h2> <p>The <span class="horse">Pinto</span> is related to the <span class="horse">Mustang</span> and roamed the planet Earth. They ...</p>
By using the class attribute, we saved ourselves a lot of typing. but more importantly, we made managing the web pages much easier. If we want to change the background from #694f31 to #3333CC, we only need to do it one place. The above HTML is then rendered by the browser as:
The Pinto is related to the Mustang and roamed the planet Earth. They ...
Here is a good reference and tutorial on CSS floats: Floatutorial.
The HTML and CSS Table Border Style Wizard at the http://www.somacon.com/ site offers a useful on-line tool for playing with the affects of CSS on HTML table rendering. This site provides several useful Web Development tools.