Dreamweaver.MX.1002004.The.Missing.Manual [Electronic resources] نسخه متنی

6.6 Advanced Styles

Tag and class styles are the most common types of styles, but they aren't the only
ones available. There are many other types with various functions and purposes, but
Dreamweaver lumps them together under the term advanced styles. To be technically
accurate, tag and class styles aren't really styles per se. In CSS-lingo, they're known
as different types of selectors.

A CSS selector is an instruction that tells a Web browser what it should apply the CSS
formatting rules to. For example, a tag selector tells a browser to apply the formatting to any instance of a particular tag on the page. Thus, an <h1> tag style will apply to
all <h1> tags on a page. A class selector, on the other hand, only applies when the
browser encounters the class name attached to an element on a page.

NOTE

Note: For a detailed discussion of selectors, visit
www.westciv.com/style%5Fmaster/academy/css_tutorial/
selectors/indexl
.

There are a variety of selectors in the CSS arsenal (a few of the most common and
useful are mentioned below), but in Dreamweaver you go about creating them all the
same way. Start by creating a CSS style, following the instructions on Section 6.2. But when you get to the New CSS Style window (Figure 6-2), instead of selecting the Tag or Class selector type, choose the Advanced option.

With the exception of four "pseudo-classes" (discussed next) in the advanced selector
drop-down menu, you must type the selector name in the text field at the top of that
window. As described below, each type of advanced selector has a different syntax.
(The remainder of the process of creating the style is just like creating a tag or class
style [Section 6.2.2], and the process of editing or deleting these styles is also identical.)

6.6.1 Pseudo-classes

When you select Advanced in the New CSS Style menu, Dreamweaver lets you select
one of four pseudo-classes from the Selector menu, as shown in Figure 6-12. These
four options (a:link, a:active, a:visited, and a:hover) correspond to the types of links
described in step 13 on Section 1.3.3.

Dreamweaver includes four
advanced selector types in
the Selector menu. These
pseudo-classes affect how
links appear.

For example, a:link represents the formatting state of an unvisited link on the page;
a:active represents the look of the link as the visitor clicks it; a:visited represents the
link's look after the visitor has already been to the linked page; and a:hover describes
the look of the link as the mouse moves over it. This last option is particularly useful,
since it works like a rollover image, but for text.

To use these pseudo-classes, select each in turn from the Selector menu and set its
formatting characteristics (font color, size, underscore, and so on). You must, however,
create these pseudo-classes in the order that they appear in the menu.

Using these styles, you could make your link text appear red and underscored before
it's clicked, blinking when the mouse moves over it, purple boldface when clicked,
and pale pink after it's been visited. (All right, you might never be hired to do Martha
Stewart's Web site, but you get the point.)

Section 1.3.3), behind the scenes,
Dreamweaver actually creates these pseudo-class styles in the page's internal style sheet.

These link pseudo-classes have one drawback: setting them affects all links on a page.
In that respect, they're like tag styles, except they change the different states of a link
(clicked, active, and so on).

If you want to use these styles for only certain links on a page, you could do the following:
First, create a class style and apply it to each link you wish to have a special
appearance. Then create another new style, click the Advanced radio button, and type
a.className:link (or :active, or :hover, or whichever state you wish to define) where
className is the name of the class you applied to the link. (Alternatively, you could
use contextual selectors to achieve the same goal, an advanced technique described
on Section 6.6.3.)

For example, say you have a set of five links that act as a navigation bar on the left side
of a page. You want each of these text links to have a border and a background color,
and you want the background color to change when a visitor moves his mouse over
the link. Create a new class style named, say, mainNav, then apply this style to each
link (<a> tag). Then create your pseudo-classes for each of the different link states.
For example, for the main link state, you could simply name the style a.mainNav:
link; the visited link would be a.mainNav:visited, and so on.

6.6.2 IDs

An ID is a type of selector that lets you format a unique item on a page. You use an
ID style to identify an object (or an area of a page) that appears only oncea banner,
copyright notice, or main navigation bar, for example. IDs are frequently used with
CSS-based layouts like those presented in Chapter 8.

An ID style is very similar to a class style, in that you supply the style's name and you
apply the style manually. However, while class styles begin with a period (.company,
for example), ID styles must begin with the # symbol (#banner, for example). Also,
while you can apply a class style many times on a page, an ID style can appear only
once per page.

NOTE

IDs are often assigned to a <div> tag. The <div> tag, which indicates a logical division of a page, is
discussed on Section 8.2.

To create an ID style, choose the Advanced option in the New CSS Style window (see
Figure 6-2), type the # symbol and then the style name#banner, for example. Applying
IDs can also be a little tricky, but the easiest method is to use the tag selector
to apply an ID to a particular tag as shown in Figure 6-13.

You can use the contextual menu on the tag selector to apply an
ID style to a tag. Simply right-click (Control-click) a tag, choose
Set ID, and then select the ID name from the menu.

6.6.3 Contextual Selectors (Descendent Selectors)

Tag styles have their drawbacks. While a tag style for the <p> tag makes simple work
of formatting every paragraph on a page, it's also indiscriminate. You may not want
every paragraph to look the same.

Maybe, for example, you may want to divide a Web page into different sectionsa
sidebar and a main content area, for instance, using a smaller size text for paragraphs
and headings in the sidebar. You could create two class stylessidebarText and
mainText, for exampleand then apply them to the appropriate paragraphs in the
respective parts of your design (<p class="sidebarText"> for sidebar paragraphs and
<p class="mainText"> for body text). But who has that kind of time?

What you really need is a "smart" tag style, one that can adapt to its surroundings, like
a chameleon, using the appropriate formatting depending on where it is in the page.
Fortunately, CSS offers just such a type of stylecontextual selector.

NOTE

"Contextual selector" is the name given in the original CSS standards. In the most recent incarnations
of these rules, the name has been changed to "descendent selector." But because "contextual selector" is
more descriptive, you'll see that term in this book.

A contextual selector lets you limit the application of a style to a certain context. For
example, you can create a style that formats a <p> tag to be blue and 9 pixels tall, but
only when that tag appears in a sidebar. How does a Web browser know the tag is in
a sidebar? You tell itusually by using another style.

For example, the Web page shown in Figure 6-14 has a common table-based layout.
The gray box on the left side of the page is a single table cell, while the white box to
the right is another cell, containing the page's main content. By creating a class called
.main and applying it to the <td> tag of the main cell, you set the context for all other
HTML placed inside that cell. Now a heading tag (<h1>) that appears inside that cell
is within the context of .main.

NOTE

The Cascading Style Sheets tutorial includes an example of the power of contextual selectors. See
Section 6.8.5.

Contextual selectors
can reduce the
amount of code
used in a Web page.
They also speed production
by eliminating
time-consuming
formatting chores.
In this example, the
HTML code that appears
within the left
table cell is the same
as the code in the
right-hand cell; only
their contexts differ.
The sidebar content
is contained within
a cell with a class
style.sidebarapplied
to it. Thus the
<h1>, <p>, and
<li> tags are within
the context of the
.sidebar style.

6.6.3.1 Creating the "Context"

There are a variety of ways that you can define the context of text, images, or other
page content. Some are automatic, and some you'll craft yourself:

HTML tags can automatically fall within the context of another tag, merely by
being inside that tag. For example, if you want to emphasize a single word inside
an <h1> tag, you can select the word and click the Bold button on the Property
inspector. That step applies the <strong> tag to the word (see Section 3.3.2). In essence,
the context for this instance of the <strong> tag is the <h1> tag, since the <strong>
tag is inside the <h1>.

Why would you care about this? Since headlines are already bold, the <strong> tag
will have no visual effect on the word inside the headline. You could then create
a contextual selector style that could make the <strong> tag appear in italics, or
red, or underlined, whenever it appears inside a <h1> tag.

As in the example in Figure 6-14, applying a class style to a table cellthe <td>
tagmakes everything inside that cell fall within the context of that class.

Another common way to define an area of a page is to use an ID selector (described
on Section 6.6.2). You could apply an ID style to a table cell, or wrap an entire chunk
of content inside a <div> tag and apply the ID to it. (See Section 8.2 for more on
the <div> tag.)

6.6.3.2 Creating Contextual Selectors

Creating contextual selectors is no more difficult than creating any other type of style.
You follow the same process as described on Section 6.2 for creating a stylebut in
the New CSS Style window, select the Advanced option. You then type the contextual
selector in the selector box. List the context for the style first, followed by a space and
a tag or other selector type. For example:

To create a special look for the <strong> tag when it appears inside the <h1> tag,
you would type h1
strong in the Selector box. The h1 is the context in which the
strong tag must appear for the formatting to apply.

You use a similar naming scheme for tags that appear inside classes, too. Following
the example in Figure 6-14, you could specify the look of paragraphs that appear
inside another element with the class style .sidebar by typing .sidebar p into the
Selector box. (Remember, classes begin with a period, so you must include one
when creating the selector name.)

Likewise, if you wanted to define the look of bulleted lists wherever they appear
inside an ID Style named #banner, you'd type #banner ul in the Selector box.

You can even create very complex contextual selectors that involve multiple elements.
For example, to format anything inside a <li> tag that's inside a <td> tag
that's inside a tag with the class style mainStory applied to it, you'd create a selector
named .mainStory td li.

When working with contextual selectors, it may help you to read the selector name backwards. Take, for example, the selector .mainStory td li. The li means "this style applies to the <li> tag"; the td means "but only when it's inside a <td> tag"; and the final .mainStory means "and only when that <td> tag is inside another tag that has the class .mainStory applied to it."

After you name the contextual selector, click OK in the New CSS Style window. You're
ready to start adding the CSS properties that define the formatting of your contextual
selector style. In other words, proceed as you normally would when creating any type
of style.