CSS in Dreamweaver Tutorial: Text Properties for CSS Styles
Text Attributes in Dreamweaver CSS
Parts 1 and 2 of this Dreamweaver CSS Tutorial series provided an overview of how to create a Cascading Style Sheet in Dreamweaver and how to add or edit individual styles that can be applied to various elements of your HTML pages. Macromedia Dreamweaver offers a wealth of options for customizing text in HTML through it’s thorough CSS palettes. Although styles and attributes can always be coded manually into your CSS file, the easy inclusion of many features in the rules window makes the process much easier. Following is an overview of how to incorporate some of the most widely-used text features in Dreamweaver CSS.
The most common way to control the appearance of your text using CSS in Dreamweaver is to choose settings in the “type” palette of the style rules window. After you have created a new style and named it, the rules window will automatically appear. The “type” palette allows you to select your choice of font family from among those typically available in HTML files. You may also select a size in pixels, points, picas and other common units of measurement. Standard choices of type style or weight like italic and bold are common options, as well as your choice of font color. Additionally, there are several type attribute options that can be configured in the Dreamweaver CSS palette that are not typically available through standard font HTML tag code. For example, you may choose to configure the leading of your text using the “line height” option in the “text” palette. You can choose the smallcaps option in the “variant” field or opt for all uppercase in the “case” field. Dreamweaver CSS also provides an option for underlined or blinking text using the “decoration” check boxes in the “text” palette.
In the “block” palette text spacing options may be configured. Word spacing or letter spacing (kerning) can be added in pixels, points or other units using the input fields. You may also choose your desired option for text alignment both horizontally and vertically. The palette also offers an option to set indention spacing for a particular style. The “list” palette provides a way to configure bulleted lists with customized settings including the option of designating a specific image file to use as a “bullet.”
These text features allow website developers to create a cohesive look for text throughout many pages in a website, all within Dreamweaver. Once the “rule” parameters are set, you can apply your styles to any text within your HTML documents by using the Styles drop-down menu in the Properties window. In addition, you may edit the look of the styled text quickly from the CSS Styles window and view the changes without ever leaving your HTML file.
Read Part 4 of this series for an overview of creating Dreamweaver CSS styles that govern your page links.
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.
