Text Styles

Text styles are separated into block-level styles and inline styles. A block-level tag occupies its own block in the browser, like <h2> or <p>. Inline styles exist within a block, like a bold or italic phrase within a paragraph.

Block-level Text Styles

Generic paragraph


<p>Generic paragraph text. The default font-size is 1em and the default line-height is 1.8, resulting in highly readable text. The font families, listed in order of priority upon availability are: Lucida Grande, Verdana, Arial, Helvetica, sans-serif.</p>

Generic paragraph text. The default font-size is 1em and the default line-height is 1.8, resulting in highly readable text. The font families, listed in order of priority upon availability are: Lucida Grande, Verdana, Arial, Helvetica, sans-serif.

Headers


<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Sample paragraph text.</p>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample paragraph text.

Block quote

Use the <blockquote> tag for large quote blocks, not for the indentation. If you want indentation, use one of the text styles below, or include a margin style in the block code (like <p style="margin-left: 2.5em;">).

Always include block tags inside the block quote, like <blockquote><p>.


<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

<blockquote><p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></blockquote>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Tagline

A phrase or short sentence that appears right below the page title. There can only be one tagline per page.


<p id="tagline">Lorem ipsum dolor sit amet.</p>

Lorem ipsum dolor sit amet.

Section title


<h2 class="sectiontitle">An <h2> Section</h2>
<h3 class="sectiontitle">An <h3> Subsection</h3>

An <h2> Section

An <h3> Subsection

Subtext

Subtext is not often used, but provides for a short, descriptive block.


<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

<p class="subtext">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Top author cite

A de-emphasized author citation flush left.


<p class="topauthorcite">John Smith (AMNH)</p>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

John Smith (AMNH)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Bottom author cite

A de-emphasized author citation at the bottom, right.


<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

<p class="authorcite">Jane Smith</p>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Jane Smith

Credit block


<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

<p class="credit">Significant educational and programming support has been provided by the National Aeronautics and Space Administration.</p>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Significant educational and programming support has been provided by the National Aeronautics and Space Administration.

Single-line address

Use <address> for a single-line address, but keep in mind <address> is a block-level tag.


<address>Central Park West at 79th Street, New York, NY 10024</address>
Central Park West at 79th Street, New York, NY 10024

Address block

Pending theme update, not live yet

The former solution, using <p> tags inside <address> is not valid XHTML. Use this solution instead.

There is no valid way to have a multi-line address blok using the <address> tag. Use a styled div instead.


<div class="address">
    <p>Hayden Planetarium</p>
    <p>Central Park West at 79th Street</p>
    <p>New York, NY 10024</p>
</div>

Output not available, awaiting theme update.

Block code samples

If, in the off chance, you need to include code snippets, use the <pre><code> tags.


<pre><code>
$a = 3;
$b = 9;
              
$product = $a * $b;
</code></pre>
        

              $a = 3;
              $b = 9;
              
              $product = $a * $b;

Inline Text Styles

Inline Quotes

Some older browsers do not support the <q> tag, but it is the accepted standard. Do not place quotes in the content using the double quote key on the keyboard, use the <q> tag instead. These will be replced by curly quotes.


<p>Galileo once said, <q>The Sun, with all the planets revolving around it, and depending on it, can still ripen a bunch of grapes as though it had nothing else in the Universe to do.</q></p>

Galileo once said, The Sun, with all the planets revolving around it, and depending on it, can still ripen a bunch of grapes as though it had nothing else in the Universe to do.

Emphasized Text

Use these tags around text that you want emphasized (imagine emphasizing the text while reading it). Do not use these tags to get the desired look in the browser.


<p>We <em>really</em> need to leave <strong>right now</strong>!</p>

We really need to leave right now!

Subscripts and superscripts


<p>H<sub>2</sub>O</p>
<p>E = mc<sup>2</sup></p>

H2O

E = mc2

Warning text


<p class="warning">Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor <span class="warning">sit amet</span>!</p>

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet!

Disclaimer text


<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<p class="disclaimer">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Citing references


<p>Image taken from <cite>The Field Guide</cite>.</p>

Image taken from The Field Guide.

Abbreviations


<p>Earth is 149,000,000 <abbr title="kilometers">km</abbr> from the Sun.</p>

Earth is 149,000,000 km from the Sun.

Acronyms


<p>Funding provided by the <acronym title="National Science Foundation">NSF</acronym>.</p>

Funding provided by the NSF.

Inline code samples


<p>Line 30, which reads <code>variable = a++;</code>, increments the variable <code>a</code> by one.<p>

Line 30, which reads variable = a++;, increments the variable a by one.

Keyboard input


<p>Type <kbd>www.haydenplanetarium.org</kbd> into your browser's address bar.</p>

Type www.haydenplanetarium.org into your browser's address bar.

Filenames


<p>Double-click on the <span class="filename">sample.txt</span> file to open the project.</p>

Doube-click on the sample.txt file to open the project.