Getting Started

All styles should be used inside an element with a class name of csstype. This way, you can use the CSSTypography module in conjunction with other CSS on your page. Only elements within an element with the csstype class name will be styled with this module.

Titles

...and subtitles

Sometimes, you want a title and a lighter subtitle, like the one above this paragraph. You can do this by adding a title class to a heading, and a subtitle class to a sub-heading. This will adjust the margins to group the title and subtitle together without much spacing between them.

Headings

Fairly useful.

Here's an H1

Here's an H2

Here's an H3

Here's an H4

Here's an H5

Here's an H6

Content Subhead Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Blockquotes and Cites

Typography is the craft of endowing human language with a durable visual form. Anonymous

Code

You can pull down CSSForm from the YUI Gallery. Just include this <link> element in your <head>.

Pre

  link rel="stylesheet" href="http://yui.yahooapis.com/gallery-2013.03.27-22-06/build/gallerycss-cssform/gallerycss-cssform-min.css"

Small

Here is some small text.

Strong

Here is some strong text.

Emphasis

Here is some text that we want to emphasize.

Text Alignment

You can align text through the text-left, text-center, and text-right class names.

Text aligned to the left.

Text aligned to the center.

Text aligned to the right.

Muted Colors

Add the muted class name to an element to add a muted color to the text within.

You can pull down CSSForm from the YUI Gallery. Just include this <link> element in your <head>. Here's a link

Definition Lists

Definition lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

List Elements

Add a `list` class to style ordered and unordered lists. Add the `plain` class to remove the default browser styles.

`ul` Default Styling

Add the list classes to an unordered list element to apply these styles.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

`ul` Plain Styling

Add the list classes to an unordered list element to apply these styles.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

`ol` Default Styling

Add the list classes to an ordered list element to apply these styles.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
1. Phasellus iaculis neque
2. Purus sodales ultricies
3. Vestibulum laoreet porttitor sem
4. Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

`ol` Plain Styling

Add the list plain classes to an ordered list element to apply these styles.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
1. Phasellus iaculis neque
2. Purus sodales ultricies
3. Vestibulum laoreet porttitor sem
4. Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

CSSTypography

Simple CSS for Typography

A really really really really long splash heading.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

A custom splash

Getting Started

Titles

...and subtitles

Headings

Fairly useful.

Here's an H1

Here's an H2

Here's an H3

Here's an H4

Here's an H5

Here's an H6

Content Subhead Heading

Blockquotes and Cites

Code

Pre

Small

Strong

Emphasis

Text Alignment

Muted Colors

Definition Lists

List Elements

Add a `list` class to style ordered and unordered lists. Add the `plain` class to remove the default browser styles.

`ul` Default Styling

`ul` Plain Styling

`ol` Default Styling

`ol` Plain Styling

CSSTypography

Simple CSS for Typography

A really really really *really* long splash heading.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

A custom splash

Getting Started

Titles

...and subtitles

Headings

Fairly useful.

Here's an H1

Here's an H2

Here's an H3

Here's an H4

Here's an H5

Here's an H6

Content Subhead Heading

Blockquotes and Cites

Code

Pre

Small

Strong

Emphasis

Text Alignment

Muted Colors

Definition Lists

List Elements

Add a list class to style ordered and unordered lists. Add the plain class to remove the default browser styles.

ul Default Styling

ul Plain Styling

ol Default Styling

ol Plain Styling

A really really really really long splash heading.

Add a `list` class to style ordered and unordered lists. Add the `plain` class to remove the default browser styles.

`ul` Default Styling

`ul` Plain Styling

`ol` Default Styling

`ol` Plain Styling