A Brief Introduction to Styles

At the moment, the way that web pages are constructed is going through a transition. HTML is well suited to setting up links to different pages, images and locations on the net. It is not all that well suited to telling a browser how that information should look. Until recently, web designers had to do the best they could using layout tables, frames and other trickery to get there pages to look the way they wanted. While this does work more or less, the problem with such an approach was each browser would interpret the HTML slightly differently. This means that a page might look great in Safari for OS X, but look terrible or even be unusable in an older version of Internet Explorer running on Microsoft Windows.

The solution was to create a standard that would be read the same in all browsers. This standard is called CSS, or Cascading Style Sheets. It is certainly beyond the scope of this tutorial to explain the intricacies of how this works. Fortunately NvU does a lot of this work for you. All you really need to know at this point is that HTML handles the content of the site (text, links, images, etc.) and styles determine how that content should look. So, content first, then worry about how it looks. This approach has two distinct advantages. First, there is a much greater chance of your site looking the same no matter which browser it is viewed on. Second, if you decide that you want to change the look of your site, all that is required is changing the style associated with the site's content, without having to re-do the whole site from scratch.

For a more detailed explanation of how CSS works check out the links section of the tutorial.

To use styles to define the layout of a page, you need to instruct NvU to do so. This is set in the preferences which can be found in by selecting Tools > Preferences in NvU's menu bar. A window will pop up. Make sure box labelled "Use CSS styles instead of HTML elements and attributes" is ticked. That's it, you are now ready to start defining how the pages are laid out.

Click "OK" and you are all set up to start using styles.