Home » Adobe Manuals » Computer Software » Adobe 38028779 » Manual Viewer

Adobe 38028779 User Guide - Page 255

About conflicting styles, Using the CSS Styles panel

UPC - 718659742201

Add to My Manuals
Save this manual to your list of manuals

Page 255 highlights

About conflicting styles When you apply two or more CSS styles to the same text, the styles may conflict and produce unexpected results. Browsers apply style attributes according to the following rules: • If two styles are applied to the same text, the browser displays all attributes of both styles unless specific attributes conflict. For example, one style may specify blue as the text color and the other style may specify red. • If attributes from two styles applied to the same text conflict, the browser displays the attribute of the innermost style (the style closest to the text itself ). • If there is a direct conflict, the attributes from CSS styles (styles applied with the class attribute) overrule attributes from HTML tag styles. In the example that follows, the style defined for h1 might specify the font, size, and color for all h1 paragraphs, but the custom CSS style .Blue applied to this paragraph overrules the color setting in the H1 style. The second custom CSS style .Red overrules .Blue because it is inside the .Blue style. This paragraph is controlled by the .Blue custom style and h1 HTML tag style.Except this sentence is controlled by the .Red style. Now we're back to the .Blue style. Using the CSS Styles panel Use the CSS Styles panel to apply custom CSS styles to the current selection. The CSS Styles panel displays custom (class) CSS styles only; redefined HTML tags and CSS selector styles do not appear in the CSS Styles panel, because they are automatically applied to any text controlled by the specified tag or selector. (If you want to simply cut and paste reusable but not updatable and customizable styles, use the HTML Styles panel.) Choose Window > CSS Styles to display the CSS Styles panel. Apply displays the tag of the current selection. Choose a tag from the pop-up menu to select a different tag. New Style opens the New Style dialog box. Create a new style for a particular document or create a new external style sheet. Attach Style Sheet opens the Select Style Sheet File dialog box. Select an external style sheet to attach to your current document. Edit Style Sheet opens the Edit Style Sheet dialog box. Edit any of the styles in the current document or in an external style sheet. See also "Using CSS style sheets" on page 248. Note: Right-click (Windows) or Control-click (Macintosh) the CSS Styles panel to open a context menu that includes Edit, Duplicate, Delete, Apply New Style, Edit Style Sheet, and Attach Style Sheet commands. Inserting and Formatting Text 255

Section	Page
Contents	3
Getting Started	11
System requirements	12
Installing Dreamweaver	12
Learning Dreamweaver	13
Guided Tour movies	13
Tutorial	13
Dreamweaver lessons	13
Dreamweaver user guide (printed book)	14
Dreamweaver Help	14
Extending Dreamweaver	16
Dreamweaver Support Center	16
Dreamweaver discussion group	16
Web development workflow	17
About site Planning	17
About designing Web pages	18
About adding content	18
About interactivity and animation	19
About testing and publishing your site	20
Where to start	20
Typographical conventions	22
What’s new in Dreamweaver 4	22
Enhanced code editing	22
Easier page design	23
Improved integration	23
Streamlining your workflow	24
Common user interface	24
HTML and Web technologies resources	25
Accessibility and Dreamweaver	26
Dreamweaver Tutorial	27
Take a guided tour of Dreamweaver	28
The Dreamweaver work area	28
Working in Dreamweaver	29
How the tutorial files are arranged	29
Preview the completed Web site	30
Set up the site structure for the tutorial	31
Define a local site	31
Create the site home page	34
Save your document	34
Define the document page title	35
Design a page in Layout view	35
Work in Layout view	36
Draw layout cells	37
Resize layout cells	38
Add multiple layout cells	39
Move a layout cell	40
Group cells in a layout table	40
Move the layout table	41
Add another layout cell	42
Create a layout table	42
Draw layout cells in a table	43
Add content to the page	44
Insert images	44
Create a rollover image	45
Create the other rollover images	46
Preview your document	47
Insert text	48
Format text	48
Apply color and style	49
Work in Standard view	50
Set cell properties	50
Selecting a table	51
Set table properties	51
Add cell padding	52
View the site files	52
Link your documents	54
Test your page	56
Use the Assets panel	56
Select a new document	56
View site assets	57
Insert an image	58
Insert a Flash movie	58
Apply a color using the Assets panel	59
Create a favorite assets list	59
Add multiple images to favorites	60
View favorite assets	60
Insert Flash objects	60
Create a Flash Text object	61
View the Flash Text object in the document	62
Create a Flash button object	62
View the Flash button in the document	63
Create a template	63
Create a template from an existing page	64
Modify the template	64
Apply the template to a new page	66
Editing a template-based page	67
Check your site	68
Create a Design Note	68
Sitewide reports	70
The next steps	70
Dreamweaver Basics	71
About the Dreamweaver work area	72
About the different views in Dreamweaver	73
Working with the Code view	73
Working with the Design view	73
About the Document window	74
Resizing the Document window	75
Minimizing and restoring windows and panels (PC users only)	76
Setting Status Bar preferences	76
Using the Launcher bar	77
Customizing the Launcher bar	77
Using the toolbar	78
Using context menus	79
Using the Objects panel	80
Using the Property inspector	82
Using dockable floating panels	82
Setting Panels preferences	83
About the History panel	84
Using the History panel	84
Using other Dreamweaver panels	86
Working with colors	87
About Web-safe colors	88
Setting preferences	88
Setting General preferences	88
Setting Fonts/Encoding preferences	89
Using Dreamweaver with other applications	89
Basic Customizing in Dreamweaver	90
Using the Keyboard Shortcut Editor	90
Adding extensions to Dreamweaver	93
Planning and Setting Up Your Site	95
About site planning and design	95
Determining your goals	96
Choosing a target audience	96
Creating sites for browser compatibility	97
Organizing the site structure	98
Creating your design look	100
Designing the navigation scheme	100
Planning and gathering your assets	101
Using Dreamweaver to set up a new site	102
Editing an existing Web site	104
Editing a remote site	105
Removing a site from your list of sites	106
Site Management and Collaboration	107
About the Site window	108
Using Site window controls	108
Setting Site preferences	110
Viewing and opening files in the Sitewindow	112
Viewing local sites	112
Changing Site window layout	114
Working with files in the Site Files view	115
About the site map	116
Using the site map	117
Modifying the site map layout	118
Working with pages in the site map	119
Showing and hiding site map files	121
Viewing the site from a branch	122
Saving the site map	122
Finding files in the Site window	122
Setting up a remote site	123
Associating a remote server with a local site	124
Determining the remote site’s host directory (FTP only)	126
About WebDAV and SourceSafe integration	127
Using Dreamweaver with the WebDAV protocol	127
Using Dreamweaver with Visual SourceSafe	128
Troubleshooting remote site setup	130
Using Check In/Check Out	131
Setting up the Check In/Check Out system	132
Checking in and checking out files on a remote server	133
About Design Notes	134
Saving file information in Design Notes	135
Using file view columns with Design Notes	138
Using Design Notes in Fireworks and Dreamweaver	140
Using reports to improve workflow	141
Getting and putting files	143
Getting files from a remote server	143
Putting files onto a remote server	144
Synchronizing the files on your local and remote sites	146
Setting Up a Document	149
Creating, opening, and saving HTMLdocuments	150
Setting document properties	152
Changing the title of a page	152
Defining a background image or page color	153
Defining default text colors	153
Selecting elements in the Documentwindow	154
About invisible elements	156
Setting Invisible Elements preferences	156
Using visual guides in the design process	157
Displaying rulers	157
Using a tracing image	158
Viewing and editing head content	159
About automating tasks	160
Repeating steps	161
Applying steps to another object	162
Applying steps to multiple objects	162
Copying and pasting steps between documents	164
Creating new commands from history steps	165
Recording commands	166
Designing Page Layout	167
About layout cells and tables	169
Drawing layout cells and tables	170
Drawing a nested layout table	173
Using the Dreamweaver grid	174
Adding content to a cell	174
Clearing automatic cell heights	175
Moving and resizing layout cells and tables	176
Formatting layout cells and tables	177
Formatting a layout cell	177
Formatting layout tables	178
Setting layout width	179
Using spacer images	181
Setting Layout View preferences	182
Using Tables to Present Content	183
Inserting a table	184
Adding content to a table cell	185
Importing table data	186
Selecting table elements	187
Formatting tables and cells	189
About table tags	189
Setting table properties	190
Setting column, row, and cell properties	191
Using a design scheme to format a table	193
Resizing tables and cells	194
Changing column widths	194
Resetting width and height	195
Adding and removing rows and columns	196
Nesting tables	197
Splitting and merging cells	198
Copying and pasting cells	199
Sorting tables	201
Exporting table data	202
Using Frames	203
Deciding whether to use frames	204
About creating frame-based Web pages	205
Creating frames	206
Inserting a predefined frameset	206
Designing and inserting a frameset	207
Creating a nested frameset	208
Selecting a frame or frameset	208
Using the Frames panel	209
Selecting a frame or frameset in the Document window	210
Saving frame and frameset files	211
About frame and frameset properties	212
Setting frame properties	212
Setting frameset properties	214
Naming a frameset document	215
Specifying frame sizes	216
Setting frame and frameset borders	217
Changing the background color of a frame	217
Controlling frame content with links	218
Handling browsers that can’t display frames	219
Using behaviors with frames	220
Managing and Inserting Assets	221
Using the Assets panel	222
Adding an asset to a page	225
Changing the order of assets	226
Selecting and editing assets	227
Working with assets and sites	228
Using favorite assets	229
Adding assets to and removing assets from the Favorites list	229
Creating a nickname for a favorite asset	230
Grouping assets in a Favorites folder	231
Creating a new color, URL, template, or library item	231
Inserting and Formatting Text	233
Inserting text and objects	234
Inserting dates	235
About special characters	236
Inserting special text characters	236
Copying and pasting HTML source code in Dreamweaver	237
Creating lists	237
Setting fonts, styles, color, and alignment	238
Setting and changing fonts and styles	239
Using paragraphs and headings	240
Changing the text color	240
Aligning text	241
Modifying font combinations	242
Using horizontal rules	243
Using HTML styles to format text	244
Using HTML styles	244
Using CSS style sheets	248
About CSS style properties	250
Creating and linking to an external CSS style sheet	250
Editing an external CSS style sheet	252
Creating a CSS style in Dreamweaver	252
Applying a custom (class) CSS style	254
Exporting styles to create a CSS style sheet	254
About conflicting styles	255
Using the CSS Styles panel	255
Setting CSS Styles preferences	256
Converting CSS styles to HTML tags	256
CSS to HTML markup conversion table	257
Checking spelling	258
Running a spell check using the Check Spelling dialog box	258
Searching and replacing text, tags, andattributes	258
About HTML source code searches	260
Searching for HTML tags and attributes	260
Searching for text contained in specific tags	262
Saving search patterns	263
About regular expressions	264
Inserting Images	267
Inserting an image	268
Setting image properties	269
Aligning elements	271
Resizing images and other elements	272
Creating image maps	273
Setting hotspot properties	274
Modifying an image map	275
Creating a rollover image	276
Using an external image editor	277
Setting external image editor preferences	278
Launching an external image editor	280
Applying behaviors to images	280
Using Dreamweaver and FireworksTogether	281
Getting Fireworks files into Dreamweaver	282
Placing Fireworks images in Dreamweaver	282
Inserting Fireworks HTML code into Dreamweaver	282
Copying and pasting Fireworks HTML into Dreamweaver	283
Exporting Fireworks files to Dreamweaver	284
Launching Fireworks from within Dreamweaver	285
Designating Fireworks as the primary external image editor for Dreamweaver	286
About Design Notes and source files	287
Specifying launch-and-edit preferences for Fireworkssourcefiles	287
Editing Fireworks files placed in Dreamweaver	288
Editing Fireworks images	288
Editing Fireworks tables	289
Optimizing Fireworks images and animations placed in Dreamweaver	290
Resizing placed Fireworks images	291
Editing placed Fireworks animations	292
Updating Fireworks HTML placed in Dreamweaver	293
Creating Web photo albums	293
Inserting Media	297
Inserting media objects	297
Launching an external editor	298
Using Design Notes with media objects	300
About Flash content	300
Using Flash button objects	301
Using Flash text objects	304
Setting Flash object properties	305
Creating new button templates	306
Inserting Flash movies	307
Setting Flash movie properties	308
Inserting Generator objects	309
About Shockwave movies	310
Inserting Shockwave movies	310
Setting Shockwave properties	310
Adding sound to a page	311
About audio file formats	311
Linking to an audio file	312
Embedding audio	313
Inserting Netscape Navigator plugin content	313
Setting Netscape Navigator plugin properties	314
Playing plugins in the Document window	315
Troubleshooting Navigator plugins	315
Inserting an ActiveX control	316
Setting ActiveX properties	316
Inserting a Java applet	318
Setting Java applet properties	318
Using parameters	319
Using behaviors to control media	320
Editing HTML in Dreamweaver	321
Understanding basic HTML tags	322
Structure of a document	322
Head tags	323
Body tags	324
Text formatting tags	326
Inserting comments	327
Using the Dreamweaver Reference panel	328
About Roundtrip HTML	329
Using the Code view (or Code inspector)	330
Opening the Code view (or Code inspector)	331
Setting Code view (or Code inspector) options	333
Writing and editing code	334
Inserting scripts	335
Editing a script	336
Viewing script functions	337
Opening and editing non-HTML files in Dreamweaver	338
Editing an HTML tag in the Design view	338
Using the hints menu	341
Removing a tag	342
Setting Quick Tag Editor preferences	342
Setting code formatting preferences	343
Setting Code Colors preferences	343
Setting Code Format preferences	344
Setting Code Rewriting preferences	346
Cleaning up HTML source code	347
Formatting the HTML source code in existing documents	348
Cleaning up Microsoft Word HTML	348
Using external HTML editors	350
Using an external text editor with Dreamweaver	350
Using BBEdit with Dreamweaver (Macintosh only)	351
Editing ColdFusion and Active Server files in Dreamweaver	352
Linking and Navigation	353
About document locations and paths	354
Absolute paths	354
Document-relative paths	355
Root-relative paths	357
Creating links	358
Linking documents using the Property inspector and the Point-to-File icon	359
Linking to a specific place within a document	362
Creating an e-mail link	364
Creating null and script links	365
Managing links	366
Creating and modifying links in the site map	367
Changing a link sitewide	368
Creating jump menus	369
Inserting a jump menu	369
Editing jump menu items	370
Troubleshooting jump menus	370
Creating navigation bars	371
Inserting a navigation bar	372
Modifying a navigation bar	374
Attaching behaviors to links	374
Reusing Content with Templates andLibraries	375
Creating templates	377
Setting template page properties	379
About links in templates	380
Defining a template’s editable regions	381
Setting template preferences	383
Viewing editable and locked regions	384
Viewing editable and locked HTML source code	386
Locking an editable region	387
Using styles, timelines, behaviors, and head tags in templates	388
Creating documents based on templates	388
Finding a document’s editable regions	390
Detaching a document from a template	391
Updating pages based on a template	391
Exporting and importing XML content	392
About XML	394
Using XML tag notations	395
Creating, managing, and editing libraryitems	396
Creating a library item	396
Setting library preferences	397
Inserting a library item in a document	398
Making changes to a library item	398
Making library items editable in a document	401
Editing a behavior in a library item	401
Setting Library item properties	403
Using server-side includes	404
Editing the contents of a server-side include	406
Using Dynamic Layers	407
About layers and HTML code	408
Creating layers on your page	409
About the Layers panel	410
Nesting layers	411
Setting Layers preferences	412
Manipulating layers	412
Selecting layers	413
Resizing layers	414
Moving layers	415
Aligning layers	415
Snapping layers to the grid	416
Making layers active	416
Setting layer properties	417
Setting properties for multiple layers	419
Changing the stacking order of layers	420
Changing layer visibility	420
Using tables and layers for layout	421
Converting between layers and tables	422
Preventing layer overlaps	423
Converting to 3.0 version compatibility	424
Animating your layers	425
Using the Timelines panel	425
Playback options	426
Creating a timeline animation	427
Creating a timeline by dragging a path	428
Modifying timelines	429
Changing image and layer properties with timelines	430
Using multiple timelines	431
Copying and pasting animations	431
Applying an animation sequence to a different object	432
Animation tips for timelines	433
Behavior actions for controlling layerstimelines	434
Using Behaviors	435
Using the Behaviors panel	436
About events	436
Attaching a behavior	439
About behaviors and text	441
Attaching a behavior to a timeline	442
Changing a behavior	442
Updating a behavior	443
Creating new actions	443
Downloading and installing thirdpartybehaviors	443
Using the behavior actions that come withDreamweaver	444
Call JavaScript	446
Change Property	446
Check Browser	447
Check Plugin	449
Control Shockwave or Flash	450
Drag Layer	451
Gathering information about the draggable layer	453
Go to URL	454
Jump Menu	455
Jump Menu Go	456
Open Browser Window	456
Play Sound	458
Popup Message	458
Preload Images	459
Set Nav Bar Image	460
Set Text of Frame	461
Set Text of Layer	462
Set Text of Status Bar	463
Set Text of Text Field	464
Show-Hide Layers	465
Swap Image	467
Swap Image Restore	468
Go to Timeline Frame	468
Play Timeline and Stop Timeline	469
Validate Form	470
Debugging JavaScript Code	473
Running the debugger	474
Finding syntax errors	475

Match case Limit results 1 per page

Inserting and Formatting Text

255

About conflicting styles

When you apply two or more CSS styles to the same text, the styles may conﬂict

and produce unexpected results. Browsers apply style attributes according to the

following rules:

•

If two styles are applied to the same text, the browser displays all attributes of

both styles unless speciﬁc attributes conﬂict. For example, one style may specify

blue as the text color and the other style may specify red.

•

If attributes from two styles applied to the same text conﬂict, the browser

displays the attribute of the innermost style (the style closest to the text itself).

•

If there is a direct conﬂict, the attributes from CSS styles (styles applied with

the

class

attribute) overrule attributes from HTML tag styles.

In the example that follows, the style deﬁned for

might specify the font, size,

and color for all

paragraphs, but the custom CSS style

.Blue

applied to this

paragraph overrules the color setting in the

style. The second custom CSS style

.Red

overrules

.Blue

because it is inside the

.Blue

style.

<h1><span class="Blue">This paragraph is controlled by the .Blue

custom style and h1

HTML tag style.<span class="Red">Except this sentence is

controlled by the .Red style.</span>

Now we're back to the .Blue style.</span></h1>

Using the CSS Styles panel

Use the CSS Styles panel to apply custom CSS styles to the current selection. The

CSS Styles panel displays custom (class) CSS styles only; redeﬁned HTML tags

and CSS selector styles do not appear in the CSS Styles panel, because they are

automatically applied to any text controlled by the speciﬁed tag or selector. (If you

want to simply cut and paste reusable but not updatable and customizable styles,

use the HTML Styles panel.)

Choose Window > CSS Styles to display the CSS Styles panel.

Apply

displays the tag of the current selection. Choose a tag from the pop-up

menu to select a different tag.

New Style

opens the New Style dialog box. Create a new style for a particular

document or create a new external style sheet.

Attach Style Sheet

opens the Select Style Sheet File dialog box. Select an external

style sheet to attach to your current document.

Edit Style Sheet

opens the Edit Style Sheet dialog box. Edit any of the styles in the

current document or in an external style sheet.

See also “Using CSS style sheets” on page 248.

Note:

Right-click (Windows) or Control-click (Macintosh) the CSS Styles panel to open a

context menu that includes Edit, Duplicate, Delete, Apply New Style, Edit Style Sheet, and

Attach Style Sheet commands.