本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.4节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。
我们知道，CSS能够修饰传统的HTML页面。其实全新的HTML 5也可以用CSS进行修饰，这样将展现给我们一个更加绚丽的页面效果。本实例的目的是编写一段基本的HTML 5程序，然后使用CSS进行修饰。
其实在支持HTML 5新元素的浏览器中，使用CSS修饰各个新增标记元素的方法十分简单，可以对任意一个元素应用CSS（包括直接设置或引入CSS文件）。在默认情况下，CSS假设元素的“display”属性是“inline”的，因此，为了更加正确地显示设置的页面效果，需要将元素的“display”属性设置为“block”。
具体实现
使用Dreamweaver创建一个名为“004.html”的文件，具体代码如下所示：
<!DOCTYPE html > <meta charset="utf-8" /> <title>设置新元素的样式</title> <style type="text/css"> article{display::block} article header p{font-size:13px} article header h1{font-size:16px} .p-date{font-size:11px} </style> <article> <header> <p class="p-date">日期：2012-03-01</p> <h1> <a> 那一剑的风情 </a> </h1> <p>老先生的力作之一.</p> </header> </article>执行后的效果如图1-5所示。
因为有很多浏览器现在还不支持HTML 5中的新增元素，例如微软的IE。但是传统的CSS只能对IE支持的那些元素起作用。为了使新增的HTML 5元素可以应用CSS样式，可以在头部标记< head >中加入如下JavaScript代码，这样就可以应用样式了：
<script type="text/j avascript"> document .createElement('article'); document .createElement('header'); </script>建议读者优化上述的JavaScript代码，例如，使用条件语句包含上述JavaScript代码，这样可以使浏览器只在不支持HTML 5的情况下才执行这段脚本。
相关资源：HTML网页各种字体格式的细节修饰