The HTML5 Boilerplate starting CSS includes:
- 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 is a modern, HTML5-ready alternative to CSS resets. It contains extensive inline documentation. Please refer to the Normalize.css project for more information.
HTML5 Boilerplate defaults
This project includes a handful of base styles that build upon Normalize.css. These include:
- Basic typography setting to provide improved text readability by default.
- Protection against unwanted
text-shadowduring 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.
.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
height so that your
replacement image appears.
.hidden class to any elements that you want to hide from all
presentations, including screen readers. It could be an element that will be
not use this for SEO keyword stuffing. That is just not cool.
.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
.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
.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
We include a placeholder Media Queries to build up your mobile styles for wider viewports. It is 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 for additional features that are useful when developing mobile websites.
- Print styles are inlined to reduce the number of page requests.
- 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.
- 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
- We also apply a default margin for the page specified in
- We do not want orphans and
widows to appear on pages
you print. So, by defining
widows: 3you define the minimal number of words that every line should contain.