Cascading Style Sheets (CSS) provide you with the ability to add styling to a website that remains separate from your content. CSS can control the styling of fonts, images, spacing, and more. Here are some key pieces of information regarding CSS:

• Style sheets (.css files) are attached to your HTML files. When working with Dreamweaver templates, style sheets can be attached to the .dwt file and will be automatically applied to the related HTML documents.
• Multiple CSS files can be used on a single site to organize styling.
• Attaching style sheets is preferred over inline styles, where styling is placed inside your HTML files, because of accessibility best practices.

Each customized UConn web template created with the template builder includes a CSS file named "screen.css". This file contains links to eight global CSS files. These documents are stored on the Central Web Server and maintained by the Web Development Lab. As global files, changes can be made and applied to the websites that are built on the University template at any time. This allows the Web Development Lab to fix styling problems and apply them to many sites at once.

Please do not remove "screen.css" from your local or remote folders.

Follow the instructions below to include additional styling in your University website.

Step-by-Step Instructions

Create your own CSS file in Dreamweaver by selecting New... from the File menu.

In the new document window that opens, select Blank Page, then CSS from the Page Type column. Click the Create button. Depending on the Dreamweaver version that you are working with, your window will look like this:

You will now have a new CSS file with the following code:

Enter your CSS into the document. To learn more about CSS, try the resources below.

Save your document in the CSS folder which sits inside your root folder. Your file structure should look like this:

For this example, we have named the new CSS file new_doc.css. You can choose any name that you wish. Be sure to follow best practices in naming and use lower case letters and no spaces or odd characters.

Next, open screen.css in Dreamweaver. Under the gray copy that says Add your CSS below this line, enter the following code:

Upload screen.css and your new CSS file (e.g. new_doc.css) to the web server.

You will now be able to use your custom CSS in the site's HTML documents, in addition to the global styles.