Operation Manual

126
USING DREAMWEAVER
Creating pages with CSS
Last updated 3/28/2012
The following CSS3 properties are supported in Live View:
• text-shadow
• border-radius
• -webkit-box-shadow
• -webkit-border-image
Set CSS Styles preferences
CSS style preferences control how Dreamweaver writes the code that defines CSS styles. CSS styles can be written in a
shorthand form that some people find easier to work with. Some older versions of browsers, however, do not correctly
interpret the shorthand.
1 Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh) and from the Category list select
CSS Styles.
2 Set the CSS style options you want to apply:
When Creating CSS Rules Use Shorthand For Lets you select which CSS style properties Dreamweaver writes
in
shorthand.
When Editing CSS Rules Use Shorthand Controls whether Dreamweaver rewrites existing styles in shorthand.
Select If Original Used Shorthand to leave all styles as they are.
Select According to Settings Above to rewrite styles in shorthand for the properties selected in Use Shorthand For.
When Double-Clicking In CSS Panel Lets you select a tool for editing CSS rules.
3 Click OK.
Create a new CSS rule
You can create a CSS rule to automate the formatting of HTML tags or a range of text identified by class or ID
attributes.
1 Place the insertion point in the document, and then do one of the following to open the New CSS Rule dialog box:
• Select Format > CSS Styles > New.
• In the CSS Styles panel (Window > CSS Styles), click the New CSS Rule (+) button located in the lower-right side
of the panel.
• Select text in the Document window, select New CSS Rule from the Targeted Rule pop-up menu in the CSS
Property inspector (Window
> Properties); then click the Edit Rule button or select an option from the Property
inspector (for example, click the Bold button), to initiate a new rule.
2 In the New CSS Rule dialog box, specify the selector type for the CSS rule you want to create:
• To create a custom style that can be applied as a class attribute to any HTML element, select the Class option from
the Selector Type pop-up menu and then enter a name for the style in the Selector Name text box.
Note: Class names must begin with a period and can contain any combination of letters and numbers (for example,
.myhead1). If you don’t enter a beginning period, Dreamweaver automatically enters it
for you.