Styling the h1 Element


Styling the <h1> Element

The <h1> element will be styled very simply with border-bottom and margin-bottom as shown in Listing 20.10 and Figure 20.2.

Listing 20.10. CSS Code for Styling the <h1> Element
body {     font: 100% georgia, times, serif;     background: #fff;     color: #000; } h1 {     border-bottom: 1px solid #999;     margin-bottom: 1em; } 

Figure 20.2. Screenshot of styled <h1>.


What Is an Em?

In traditional typesetting, an em space is defined as the width of an uppercase M in the current face and point size. An em dash is the width of a capital M, an en dash is half the width of a capital M, and an em quad (a unit of spacing material typically used for paragraph indentation) is the square of a capital M.


In CSS, an em is a relative measure of length that inherits size information from parent elements. If the parent element is the <body>, the size of the element is actually determined by the user's browser font settings. So in most browsers, where the default font size is 16px, 1em will be 16px.


Hiding Content from the Printer

Some website content has no purpose on a printed page, such as site-based navigation or some advertising.


These areas of content can be hidden from the printer using display: none;.

When this declaration is applied to an element, the elements and all descendants will not be displayed. You cannot override this behavior by setting a different display property on the descendant elements.





Sams Teach Yourself CSS in 10 Minutes
Sams Teach Yourself CSS in 10 Minutes
ISBN: 0672327457
EAN: 2147483647
Year: 2005
Pages: 234
Authors: Russ Weakley

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net