demosthenes.info

Iā€™m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

CSS for HTML5

css / resets

Estimated reading time: 1 minute, 15 seconds

is applied to HTML5 in the same way it has always been: the new elements simply become selectors that can be manipulated in a stylesheet.

The significant difference is that if the browser does not understand a new element it will display it inline. This means that you will have to explicitly declare the layout of the new elements in a stylesheet for older browsers.

For the code example used in the previous article, I might apply CSS akin to the following:

body { margin: 0; background: #000; color: #fff; margin-left: 2em; }
header a { color: red; text-decoration: none; margin-right: 2em; }
aside { width: 300px; float: right; margin-left: 2em; }
time { float: left; margin-right: 2em; }
h4 { display: inline; }
section, footer { margin-top: 2em; }
figure { margin-left: 0; }
figcaption { display: block; text-align: centre; }
aside p { line-height: 1.8; }
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.