[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation

table of contents](README.md)

# The CSS

The HTML5 Boilerplate starting CSS includes:

* [Normalize.css](https://github.com/necolas/normalize.css).

* Useful HTML5 Boilerplate defaults.

* Common helpers.

* Placeholder media queries.

* Print styles.

This starting CSS does not rely on the presence of conditional classnames,

conditional style sheets, or Modernizr. It is ready to use whatever your

development preferences happen to be.

## Normalize.css

Normalize.css is a modern, HTML5-ready alternative to CSS resets. It contains

extensive inline documentation. Please refer to the [Normalize.css

project](http://necolas.github.com/normalize.css/) for more information.

## HTML5 Boilerplate defaults

This project includes a handful of base styles that build upon Normalize.css.

These include:

* Basic typography settings to provide improved text readability by default.

* Protection against unwanted `text-shadow` during text highlighting.

* Tweaks to default image alignment, fieldsets, and textareas.

* A pretty Chrome Frame prompt.

You are free to modify or add to these base styles as your project requires.

## Common helpers

#### `.ir`

Add the `.ir` class to any element you are applying image-replacement to. When

replacing an element's content with an image, make sure to also set a specific

`background-image: url(pathtoimage.png);`, `width`, and `height` so that your

replacement image appears.

#### `.hidden`

Add the `.hidden` class to any elements that you want to hide from all

presentations, including screen readers. It could be an element that will be

populated later with JavaScript or an element you will hide with JavaScript. Do

not use this for SEO keyword stuffing. That is just not cool.

#### `.visuallyhidden`

Add the `.visuallyhidden` class to hide text from browsers but make it

available for screen readers. You can use this to hide text that is specific to

screen readers but that other users should not see. [About invisible

content](http://www.webaim.org/techniques/css/invisiblecontent/), [Hiding

content for

accessibility](http://snook.ca/archives/html_and_css/hiding-content-for-accessibility),

[HTML5 Boilerplate

issue/research](https://github.com/h5bp/html5-boilerplate/issues/194/).

#### `.invisible`

Add the `.invisible` class to any element you want to hide without affecting

layout. When you use `display: none` an element is effectively removed from the

layout. But in some cases you want the element to simply be invisible while

remaining in the flow and not affecting the positioning of surrounding

content.

#### `.clearfix`

Adding `.clearfix` to an element will ensure that it always fully contains its

floated children. There have been many variants of the clearfix hack over the

years, and there are other hacks that can also help you to contain floated

children, but the HTML5 Boilerplate currently uses the [micro

clearfix](http://nicolasgallagher.com/micro-clearfix-hack/).

## Media Queries

The boilerplate makes it easy to get started with a "Mobile First" and

[Responsive Web

Design](http://www.alistapart.com/articles/responsive-web-design/) approach to

development. But it's worth remembering that there are [no silver

bullets](http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/).

We include a placeholder Media Queries to build up your mobile styles for wider

viewports and high-resolution displays. It's recommended that you adapt these

Media Queries based on the content of your site rather than mirroring the fixed

dimensions of specific devices.

If you do not want to take a "Mobile First" approach, you can simply edit or

remove these placeholder Media Queries. One possibility would be to work from

wide viewports down and use `max-width` MQs instead, e.g., `@media only screen

and (max-width: 480px)`.

Take a look into the [Mobile

Boilerplate](https://github.com/h5bp/mobile-boilerplate) for features that are

useful when developing mobile wep apps.

## Print styles

* Print styles are inlined to [reduce the number of page

  requests](http://www.phpied.com/delay-loading-your-print-css/).

* We strip all background colors and change the font color to dark gray and

  remove text-shadow. This is meant to help save printer ink.

* Anchors do not need colors to indicate they are linked. They are underlined

  to indicate so.

* Anchors and Abbreviations are expanded to indicate where users reading the

  printed page can refer to.

* But we do not want to show link text for image replaced elements (given that

  they are primarily images).

### Paged media styles

* Paged media is supported only in a [few

  browsers](http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Grammar_and_rules).

* Paged media support means browsers would know how to interpret instructions

  on breaking content into pages and on orphans/widows.

* We use `page-break-inside: avoid;` to prevent an image and table row from

  being split into two different pages, so use the same `page-break-inside:

  avoid;` for that as well.

* Headings should always appear with the text they are titles for. So, we

  ensure headings never appear in a different page than the text they describe

  by using `page-break-after: avoid;`.

* We also apply a default margin for the page specified in `cm`.

* We do not want [orphans and

  widows](http://en.wikipedia.org/wiki/Widows_and_orphans) to appear on pages

  you print. So, by defining `orphans: 3` and `widows: 3` you define the minimal

  number of words that every line should contain.