How to Reduce the Header Height in CSS

Headers look nice but consume space.

Cascading Style Sheets (CSS) customize layouts in blogs and wikis, among other things. These site components use the style sheets to configure the document's typeface, images and background and to define the way these elements interact. CSS also sets the page's header, which can contain a banner image, some other kind of logo or links to other pages. Reducing the height of this header frees up more room for content within the page's body.

Instructions

1. Open your style sheet, which is named "style.css" by default.

2. Scroll to the entry for "header." If will look something like the following:

   #header {
   background: url(/graphics/banner.gif) no-repeat;
   width:700px;
   height:200px;
   }

3. Replace the value for "height" with a lower value. For example, replace "200px" with "150px."

4. Preview your page. Reduce the height further or undo your change as necessary.

References

• "WordPress Web Design For Dummies"; Lisa Sabin-Wilson
• "Smashing WordPress: Beyond the Blog"; Thord Daniel Hedengren

Resources

• Princeton University: Custom CSS
• Indiana University: Web Accessibility Made Easy — Cascading Style Sheet Basics
• Kristarella.com: CSS Custom Headers