How to Easily Create CSS Files in Dreamweaver
How to Create a Dreamweaver CSS File
If you are using Macromedia Dreamweaver to program your next website development project, you can easily incorporate Cascading Style Sheets (CSS) into your code without ever leaving the Dreamweaver interface. The CSS capabilities included in Dreamweaver offer a wealth of options for creating consistency across varying content and multiple pages through CSS styles. This 4-part Dreamweaver CSS tutorial offers a beginning guide for using the features for CSS in Dreamweaver. This article presents an overview of how a CSS file is created in Dreamweaver and how you can add or edit specific styles within that style sheet. Part 2 shows the two ways Dreamweaver typically incorporates styles into the HTML pages within your website. Parts 3 and 4 of the Dreamweaver CSS Tutorial provide a guide to using the CSS palette to govern text styles and link styles.
Once you have your Dreamweaver website set up through the “Site Definitions” panel, creating a CSS file is easy. Simply use the File > New command to choose your options. Dreamweaver includes a number of preset CSS files based on various font and color scheme choices that you can incorporate in your pages, or you can create a custom CSS file for your website. To create a custom file, select the “Basic Page” option and choose “CSS” from the basic page options menu. Name your file, and you have a blank CSS file ready to customize with styles specific to your website design.
When working with CSS in Dreamweaver, the CSS Styles window can be very helpful. It allows you to select from multiple CSS files and create or edit specific styles within each directly from the window. To open this feature, click the Window > CSS Styles command and position the window on your desktop to suit your workflow needs.
Once your Dreamweaver CSS file has been created, you can add as many styles as you need to govern everything on your pages from text and links to spacing and background colors. With your CSS stylesheet open, choose Text > CSS Styles > New from the Dreamweaver menu to create a new style. You can also click the “page +” icon at the bottom of the CSS Styles window to create one. Once your CSS style sheet has been assigned to specific pages, you can add or edit styles directly from the palette without opening the CSS file.
Dreamweaver CSS offers three options for the type of style to create. The “class” style is one that can be applied to any tag in your HTML code to control its appearance and function. The “tag” option allows you to govern the treatment of whole tag sets such as tables, table cells, headers, block quotes, and many more. It eliminates the need to assign various styles to specific tags of a page manually. The “advanced” options control the appearance of links with more specific parameters than the Dreamweaver page properties functions.
To create your new CSS style, just click your choice from the above options and give the style a name if necessary. Once you click OK, you may select the desired rules for the style using the various parameters for CSS in Dreamweaver.
Once your Dreamweaver CSS styles have been created, it’s time to assign them to specific parts of your HTML web pages. Part 2 of this article series shows you how.
This post is part of the series: Tutorial of CSS in Dreamweaver
This tutorial provides easy-to-follow steps for using CSS in Dreamweaver. Part 1 offers an overview of how CSS files are created and the types of CSS styles available. Part 2 explains the two ways Dreamweaver incorporates CSS into HTML, and parts 3 & 4 highlight CSS attributes for text and links.
