Free CSS Layouts

Saturday 29th of April 2017 03:28:11 AM

Free CSS Layouts

Please feel free to borrow, steal, abduct, and/or torture the documents contained here. Enjoy.

Two Column Layouts

TIP

It's actually better to pick class names that are descriptive of the type of information contained within, not of the visual effect you're trying to achieve at the moment. For example, let's say that we want the dark blue color to be applied to all H2 elements that are subsection headings. It would be much better to pick a class name like subsec or even sub-section. Both of these names have the

2 columns - left menu

A simple two column layout with the standard left-side menu.

2 columns - right menu

Practically the same HTML as 2 columns - left menu, but with a different stylesheet.

Three Column Layouts

3 columns - flanking menus

Three columns, no tables, intelligent order of elements. What more is there to say?

Many a talented web designer has struggled with CSS-based centering. Though CSS vertical centering eludes us, two techniques for horizontal centering are approved. Take your pick: Auto-width Margins or Negative Margin.

is a single point in size.

Figure 5-27

Figure 5-27. Same font, same style, different sizes

There isn't much that can be done about this, unfortunately, save better font handling by operating systems. Usually, the italic and oblique fonts look exactly the same in web browsers.

Still, font-style can be useful. For example, it is a common typographic convention that a block quote should be italicized, but that any specially emphasized text within the quote