Type Your Main Heading Here
The purpose of this page is twofold. First, it is a demonstration of how you can use CSS to layout a Web page. Second, it is a template you can download freely, save on your computer, modify to suit your purpose, and then publish at your Web site. Using this template, you can create many different kinds of layout elements onscreen. All of these elements are optional. If you do not want a sidebar onscreen, for example, you can delete the sidebar's div from your HTML.
Notice how the navigation can contain two levels of menuing, that is, you can have primary links and sublinks. The primary links have a blue border around them with square bullets. The secondary links appear inside the border and have triangular bullets. In this page's HTML, the navigational menus are created by unordered lists, which get their styling from the stylesheet. If this sounds complicated, you can see how easily this is achieved by taking a look at the HTML of this page. To do so, pull down your browser's View menu, and choose the option to view the HTML source code of this page. In the HTML, you will notice that even the horizontal menu in the "menubar" of this page is created from an unordered list. The stylesheet uses the "inline" setting to make the menubar's list appear horizontally onscreen.
Type Your Subheading Here
The images on this page float either on the left or on the right of the paragraph with which they are associated. This is achieved with style classes named .leftimage and .rightimage, respectively. These classes use the CSS "float" style to make the images float onscreen. Notice how the surrounding text flows around them. Try resizing your browser window, and notice how everything adjusts. You are experiencing the ease of CSS layout.
The rest of this page is nonsensical Latin that compositors typically use to see how text will appear in a page design.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.
Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.
This is an H3 (Level 3) Subheading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.
Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.