IT tutorials
 
Graphics
 

Adobe Dreamweaver CS5 : Creating and Applying Styles (part 1) - Generating new styles

4/16/2013 3:00:26 AM
- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

Dreamweaver uses four primary tools to implement Cascading Style Sheets: the CSS tab of the Property inspector, the CSS Styles panel, the Edit Style Sheet dialog box, and the Style Definition dialog box. The CSS tab of the Property inspector is available when text is selected and is a great vehicle for applying styles as well as reviewing and modifying related properties, such as font-family, size, and color — you can also create new CSS rules for selected text. You use the CSS Styles panel to view all the styles available or those that are being applied to the currently selected HTML tag; the CSS Styles panel also provides a direct link to modifying any property or for adding properties to any rule. The Edit Style Sheet dialog is useful for managing groups of styles and style sheets, whereas the Style Definition dialog defines the CSS rules themselves. With these interfaces, you can accomplish the following:

  • Link or import all your styles from an external style sheet

  • Create new selectors and specify their rules

  • Apply styles to selected text or to a particular tag surrounding that text

  • Modify any styles you create

1. Generating new styles

The world of CSS can be overwhelming to the novice designer: How do you even begin to master this complex set of rules and concepts? Dreamweaver offers many routes to explore CSS, but perhaps the easiest entry is through the Property inspector. Set a font face, font size, or color on any bit of text and Dreamweaver applies your formatting either as a modification of an existing rule or as a new style that is added to the list of available styles, right in the Property inspector.

Dreamweaver CS5 is much smarter about the creation of new styles through the Property inspector than in previous versions. Dreamweaver no longer automatically inserts generically named classes — such as Style1, Style2, and so on — into the head of your document. Instead, Dreamweaver intelligently guides you to proper CSS rule creation with appropriate selectors or class names of your choosing, stored where you specify: embedded in the document or within an external style sheet.


Walk through the following steps to see how Dreamweaver helps you build styles correctly:

  1. Switch to the CSS tab in the Property inspector.

  2. Select the text you want to style, either by highlighting it or choosing the tag from the Tag Selector.

    Dreamweaver selects any CSS rule previously defined that specifically targets the selection in the Targeted Rule list. If no such rule exists, <New CSS Rule> is selected in the Targeted Rule list, as shown in Figure 1.

    Figure 1. If there is no specific rule for the current selection, Dreamweaver automatically prepares the way for you to create a new style by setting the <New CSS Rule> in the Targeted Rule list.

    If you select a portion of text rather than the entire tag, the style is applied to a <span> tag surrounding your selection; otherwise, the style is applied to the containing element, like a <p> or heading tag such as <h3>.


  3. Change any property in the Property inspector, including font name, size, color, or alignment, or select the Bold or Italic options.

  4. Dreamweaver displays the New CSS Rule dialog box.

    The type of selector and the selector name displayed depends on — you guessed it — your selection. If you have chosen a range of text, Dreamweaver sets the Selector Type to Class and gives you the opportunity to enter a new class name. If you've chosen a tag from the Tag Selector, the Selector Type becomes Compound and the Selector Name is a descendant selector , such as #outerWrapper #content h3, as shown in Figure 2. The descendant selector represents where the selected tag is in the CSS cascade.

    Dreamweaver even provides a plain-language translation of how the rule is applied, as in the following:

    This selector name will apply your rule to
    all <h3> elements
    that are within any HTML elements with id "content"
    that are within any HTML elements with id "outerWrapper".

    Figure 2. When a tag is selected for a new rule, Dreamweaver puts the most specific descendant selector possible in the Selector Name field.
  5. If the current selector is too specific and you want the rule to be more generally applicable, click Less Specific. Each time you click Less Specific, the leftmost selector (#outerWrapper in this example) is removed.

    Once you choose Less Specific, the More Specific button is enabled. You can restore the leftmost selector by clicking More Specific. The plain-language translation is adjusted accordingly.

  6. Choose where you want your new rule stored from the Rule Definition list and click OK.

Dreamweaver's mechanism for creating new CSS rules through the Property inspector is extremely powerful, from both workflow and learning perspectives. Not only does Dreamweaver help you create appropriate CSS rules, it provides insight into a key CSS concept, the cascade, when working with Compound selectors.

The following sections explain the four selector types — Class, ID, Tag, and Compound — in depth.

1.1. Class

Making a custom style is the most flexible way to define a style on a page. The first step in creating a custom style is to give it a name; this name is used in the class attribute. The name for your class must start with a period and must be alphanumeric without punctuation or special characters. If you do not begin the name of your custom style with a period, Dreamweaver inserts one for you. Here are some typical names you can use:

.master
.pagetitle
.bodytext

Although you can give your classes names such as body, title, or any other HTML tag, this approach is not a good idea. Dreamweaver warns you of the conflict if you try this method. Also be aware that class names are case-sensitive.


1.2. ID

An ID selector is applied through the id attribute, available for almost all HTML tags. Each ID selector is intended to be unique for each page. In other words, you apply an ID rule once per page. An ID selector is identified by an initial pound sign, as in #footer.

1.3. Tag

The third option in the Selector Type list is Tag. This type of style provides an excellent tool for making quick, global changes to existing Web pages. Essentially, the Tag style enables you to modify the features of your existing HTML tags. When you select this option, the drop-down list displays more than 90 HTML tags in alphabetical order. Select a tag from the drop-down list and click OK. As you become more familiar with HTML, you're free to simply enter the tag into the Tag field.

1.4. Compound

Because of its flexibility, you may find that you use the Compound option frequently. Enter the selector directly in the Compound field; Dreamweaver allows almost any type of input, whether or not it recognizes the selector type. In addition to ID and descendant selectors, you can also group selectors when applying a single style to multiple tags and/or classes. If, for example, you want to create a style for the <body>, <td>, and <th> tags, you enter the tag names in the Compound field (without their delimiters) in a comma-separated list like this:

body,td,th

The Compound option is also useful for defining pseudo-classes and pseudo-elements. A pseudo-class represents dynamic states of a tag that may change under user action or over time. Several standard pseudo-classes associated with the <a> tag are used to style hypertext links. When you choose Compound, the drop-down list box contains four customization options, which can all be categorized as pseudo-classes:

  • a:link — Customizes the style of a link that has not been visited recently

  • a:visited — Customizes the style of a link to a page that has been recently visited

  • a:hover — Customizes the style of a link while the user's mouse is over it

    NOTE

    The a:hover pseudo-class is a CSS Level 2 specification and is not supported by Netscape 4.x. Furthermore, a:active links are always colored red, regardless of the CSS specifications.

  • a:active — Customizes the style of a link when it is selected by the user

Dreamweaver does not preview pseudo-class styles (except for a:link), although they can be previewed through a supported browser.


A pseudo-element, on the other hand, gives you control over contextually defined page elements: For example, p:first-letter styles the first letter in every paragraph tag, enabling a drop-cap design. Because of their specific nature, Dreamweaver does not display any pseudo-elements in the Compound list. You can, however, enter your own — Dreamweaver does a fine job of rendering both the :first-letter and :first-line pseudo-elements.

NOTE

Dreamweaver does not render the lesser-used pseudo-elements :before and :after in the Design view; however, they are displayed properly in Live View.

1.5. Descendants and other advanced selectors

Dreamweaver also enables you to enter some of the more advanced additions to the CSS selector palette through the Compound selector type.

One such selector is the descendant selector. Descendant selectors are contextual selectors because they specify one tag within another. A descendant selector, for example, permits you to give paragraphs within a table a different style than paragraphs outside a table. Similarly, text nested within two blockquotes (giving the appearance of being indented two levels) can be given a different color, font, and so on than text in a single blockquote.

For example, to style text within nested blockquotes, enter the following in the Compound field of the New CSS Rule dialog box:

blockquote blockquote

In essence, you are creating a custom style for a set of HTML tags used in your document. This type of CSS selector acts like an HTML tag that has a CSS style applied to it; that is, all page elements fitting the criteria are automatically styled. You can also combine custom styles with redefined HTML styles in a descendant selector.

Other advanced selectors that you can enter in the Compound field include:

  • Child: Selects an element that is a direct child of another element. For example, in a div tag with nested div elements, div > p selects the paragraphs in the outermost div tag only.

  • Adjacent-sibling: Selects an element that immediately follows another. For example, in an unordered list with two list items, li + li selects the second list item, but not the first.

  • Universal: Selects any element. This selector may be used to skip one or more generations of tags. Use body * p to select paragraphs contained within div elements that are children of the body tag, for example.

  • Attribute: Selects tags with specified attributes. You can select tags if they either contain the attribute (p[align]) or if they contain an attribute set to a specific value (p[align="left"]).

Best of all, these selectors are rendered correctly in both Dreamweaver's Design and Live views. Most modern browsers (such as Firefox, Internet Explorer 7 and higher, or Safari) properly render these selectors as well.

NOTE

Dreamweaver warns you if you enter what it considers an invalid selector type; however, you are given the option to use the selector if you choose.

 
Others
 
- Adobe Illustrator CS5 : Working with Objects - Using the Shape Builder Tool
- Adobe Illustrator CS5 : Working with Objects - Creating Grids
- Adobe Photoshop CS5 : Additional Selection Commands
- Adobe Photoshop CS5 : Basic Selection Tools
- Adobe Fireworks CS5 : Fireworks and Dreamweaver (part 3) - Three-slice technique for content containers
- Adobe Fireworks CS5 : Fireworks and Dreamweaver (part 2) - Round-trip editing
- Adobe Fireworks CS5 : Fireworks and Dreamweaver (part 1) - Copying and pasting to Dreamweaver
- Adobe Flash Professional CS5 : Working Within the Flash Environment - Organizing Layers
- Adobe Flash Professional CS5 : Working Within the Flash Environment - Viewing Layers
- Adobe InDesign CS5 : Opening Documents and Templates (part 2) - Converting documents created with other programs
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS