To illustrate how templates and stylesheets are used in umbraco, here is a brief tutorial using the most basic of ugly website designs :-)
Intro: Tutorial setup
Technically, you can add templates to umbraco without having to have anything else in the site, but for practical purposes, it helps to at least have the Document Types defined. (For info about teams and parallel development with umbraco see http://v3.umbraco.org/documentation/books/umbraco-basics/umbraco-for-teams)
For the purposes of this tutorial, we will create two basic Document Types, as illustrated below.
To create a Document Type, go to Settings and right-click on Document Types and choose Create from the menu. Type in a name and for convenience, check the box next to "Create matching template". Finally, click the Create button. You can then add tabs and properties for the new Document Type. (Read more about Document Types)
These two screens show the properties for our sample Document Types "Section" and "Texpage"
1. Create a Main Template
When you create a Template in umbraco, you give it a name and then have the opportunity to choose a "parent" template from a drop-down list of the other templates in the site, and then paste or type your code into a large box.
The concept of nested templates is very powerful. You can easily maintain a cosistent design across your entire website, and within individual sections, only varying for individual Document Types or Content Nodes. For this example, I will create a "Main" template which encompasses design elements which should appear on every page of the site, and then a template for the "child" template for Textpage nodes.
To create the "Main" template, go to Settings and right-click on Templates and choose Create from the menu.
Type in a name and click the Create button.
Now you can add the actual code for the template. Here I've pasted in the basic HTML code for this sample, and updated the "Alias" field:
(zoom of properties)
<more coming soon>
2. Add umbraco Content data fields
3. Add Recursive Content data fields
Create Textpage Template