Important Style Terms and Concepts

Following are some of the fundamental terms and concepts that you will encounter when working with styles.

Styles

In the Stylesheet Editor, you will notice several elements that already exist for your use. These are called "styles."

A style is an element to which you assign a certain look and/or behavior. You can then apply that style to your content. Different kinds of styles are available in a stylesheet, to be used for various purposes in your content. See Types of Styles in Flare.

Example <p> is a common HTML tag, which is used for designating a paragraph. In your stylesheet, you can make changes to the p style, which is used to affect the look of those paragraphs. Another style is h2, which can be used to affect the look of second-level headings (<h2> tags) in your content. Yet another style is span, which can be used to affect the look of character-level content (e.g., a portion of a paragraph, but not the entire paragraph).

Declarations, Properties, and Values

Every style has certain information that controls its look and behavior. The first piece of information is the selector, which is the XHTML element you want to style. See Selectors.

The selector is followed by the following:

Selectors

A selector is a way to associate XHTML content with style settings based on various information—most often its type, class, or ID. Sometimes the word "selector" is used interchangeably with the term "style," but a selector can be much more than just a simple style.

A simple style element type such as h1 can be used as a selector all by itself. See Creating Selectors.

Example Here is how an h1 selector could look in the Advanced view of the Stylesheet Editor after you define it.

And here is how it would look in the Internal Text Editor.

However, selectors can also be more advanced. See Advanced Selectors.

Example Here is an example of a selector that is much more complex.

Grouping Selectors

If you are comfortable with editing stylesheets in the Internal Text Editor (see Internal Text Editor), you can group selectors together. That way, they can share the same definitions, which makes styling much quicker. To do this, separate each selector with a comma.

Example You want all of your paragraphs, h3 headings, and numbered lists to have red, bold text. You could enter this information separately for each of these styles in the stylesheet. But a more efficient method is to group them together by using h3, ol, p as the following shows.

Advanced Selectors

An advanced (or "complex") selector lets you format content based on very specific criteria. There are many ways to create advanced selectors in CSS. For details, see:

http://www.w3.org/community/webed/wiki/Advanced_CSS_selectors

You can use the New Selector dialog in Flare to create advanced selectors by entering them directly in the Advanced Selector field. You would need to do this, for example, if you need to create a descendant selector. This is a selector that applies formatting when one selector is found within another.

Example You style your unordered (bulleted) lists so that the text is blue.

But if an unordered list (<ul> tag) is found within a numbered list (<ol> tag) in the markup, you want the bulleted list text to be green. To make this happen, you would create a descendant selector by separating the two selectors by white space, with the ol selector first.

You can also create advanced selectors by completing the various fields in the New Selector dialog. As you complete the different fields, the Advanced Selector field is populated accordingly. The reverse is also true. As you enter text in the Advanced Selector field directly, the other fields in the dialog are automatically populated.

Spans

A span is a selector that is used to format “character-level” content with certain attributes (such as font size, color, font family), as opposed to “block-level” content (such as a paragraph, heading, or list).

Example You want some inline text to be red and bold to indicate a warning. Therefore, you create a class of the span style and name it “Warning” (span.Warning).

Classes

In CSS there are primary styles that correspond to the different HTML elements (e.g., h1, h2, p, img). You can think of these as parent styles, because in a way, they can have children. A class is the most common type of child for a style. Some classes might already be included in your stylesheet when you first create a project.

You cannot create new parent styles, but you can create a class under any of those parent styles to give you more variety and flexibility.

Creating Classes

You can create selectors in the Stylesheet Editor by clicking the Add Selector button in the local toolbar. This opens the Selector dialog. Then you can use the Class Name field to create a class, but there are several additional advanced fields that you also have the option of using, depending on what you want to accomplish. See Creating Selectors.

When you create a class, it automatically takes on all of the same qualities from the parent style (e.g., color, alignment, size). However, you can change some of those for the class so that it is different from the parent in some ways. When you are all done, you will have a class selector.

Example You want to create a special look for paragraph notes in order to provide additional information in a topic. In addition, you might want yet another special kind of paragraph to be used for tips. Perhaps you want a light blue background for your note paragraphs, and you want a light orange background for your tip paragraphs. Meanwhile, for your regular paragraphs, you do not want any colored background.

Therefore, you could create a class of your parent p style and name it "Note."

Then you might create another class of your p style and name it "Tip."

For the Note class, you could change the background property to display in light blue, and you could change the same property for the Tip class to display in light orange. But you would leave the background property for the parent p style as it is, without a color.

In the end, both the Note and Tip classes would take on all of the style settings from its parent p style, with the exception of the background color that you have specified for each.

Identifying Classes in the Stylesheet Editor

How can you distinguish between parent styles and classes? In the Simplified view of the Stylesheet Editor, classes are listed after the parent styles, and a period is added between the name of the parent style and the name of the class (e.g., p.Tip).

In the Advanced view of the Stylesheet editor, parent styles and classes are shown in a tree view. You can expand a parent style to see its classes.

Generic Classes

In addition to creating classes that are specifically associated with parent styles, you can create generic classes. These are standalone classes that can be used with any parent style.

You can create a generic class by clearing the HTML Element field and entering text in the Class Name field.

In the Advanced view of the Stylesheet Editor, it will be shown under (Generic Classes).

In the Simplified view of the Stylesheet Editor, the Internal Text Editor, and the XML Editor, it will be shown with a period at the beginning.

A generic class can be very useful if you need to apply the same formatting to several pieces of content, even if they have different HTML elements (parent styles).

Example You want some content to be centered every now and then. Sometimes it's a paragraph, sometimes it's a div tag (container), sometimes it's a list, and so on.

So rather than using the local formatting button on the Home ribbon to center each piece of content (which you should really never do), you create a generic style class. First, you open your stylesheet, and in the local toolbar you click Selector.

In the New Selector dialog, you clear the HTML Element field (if anything is in there); alternatively, you can select (generic). And in the Class Name field, you give your new generic class a name, maybe something like Centered.

Then you find the text-align property and set it to center.

In the XML Editor, when you come across a paragraph you want to center, you just click in that paragraph, and from the Home ribbon's Style field you choose the generic .Centered class.

Suppose you prefer to use the Styles window pane instead of the Home ribbon. That's fine. Say you come across a div you want to center, such as the following div that has an image inside it. You can click on the div structure bar to select it and then choose the generic .Centered class from the Styles window pane.

Or maybe you like to use context menus. Suppose you come across a bulleted list you want to center. So you right-click the ul structure bar.

Then from the context menu you choose Style Class, then .Centered.

Identifiers

In CSS, an identifier (ID) is similar to a class, except that IDs are unique. An element in your stylesheet can have only one ID on it, whereas it can have multiple classes. And each page of your output can have only one element with a particular ID. For many authors, using an ID may not be important, but for others—such as those making use of JavaScript—IDs can be very useful.

In the New Selector dialog use the Identifier (ID) field to give the ID a name. In the Advanced Selector field, the ID name is added after #.

As with a class, an ID can be added after a specific HTML element, such as an h1 style.

Like a class, an ID can also be generic, standing alone.

After creating an ID, you can apply it to content in much the same way you would apply a class. In the interface (e.g., Styles window pane, Styles field in Home ribbon), you can identify IDs by looking for the hash (#) before the name. You can right-click a structure bar in the XML Editor, and after selecting Style ID, you can choose any available ID. See Applying Styles to Content.

Pseudo Classes

In CSS, pseudo classes are a special group of style classes that pertain to elements when they're in a certain state (e.g., the font turns orange when a user hovers over it). They are often (but not exclusively) used for styles associated with hyperlinks.

There are many types of pseudo classes that you can use. Some of the most common pseudo classes are those that are used for hyperlinks (e.g., active, focus, hover, link, visited). For details on the many kinds of pseudo classes that CSS lets you create, see http://www.w3schools.com/css/css_pseudo_classes.asp.

In the New Selector dialog you can use the Pseudo Class field to enter or select a pseudo class for the HTML element. In the Advanced Selector field, the main HTML element is followed by a colon and then the pseudo class.

Example You want a text hyperlink to display in green when a user hovers over it. Therefore, in your stylesheet you expand the a style and modify the hover pseudo class, changing the font color to green.

Note In order for <a> link pseudo classes to function properly, they must appear in the following order in the stylesheet (you can see this by opening the stylesheet in the Internal Text Editor).

a:link

a:visited

a:hover

a:focus

a:active

In order to avoid issues with this, and to ensure that your pseudo classes are working, you should explicitly set values on those pseudo classes, rather than expecting them to inherit settings from other tags.

Pseudo Class Expressions

For a handful of pseudo classes, you can also add an expression. If you select one of the valid pseudo classes (e.g., nth-child, not), you can then enter something in the Pseudo Class Expression field (e.g., 3, 5n+5, odd, even).

Example You want to show the third item in every bulleted list in a blue font.

To accomplish this, you select the ul (unordered list) style in the Stylesheet Editor and click the New Selector button. Then you click the Advanced Options arrow to show the fields at the bottom of the dialog. The Advanced Selector field starts out showing only your main HTML element (ul).

From the Pseudo Class field you select nth-child. This adds that pseudo class to the Advanced Selector field, after a colon.

In the Pseudo Class Expression, you type 3 (because you only want the third list item to be affected). This adds the number between parentheses in the Advanced Selector field.

You're almost done, but there is one more thing to do. In the Advanced Selector field, you need to place your cursor between the "ul" text and the colon, and you need to type a space followed by li. This tells Flare that it's not just the unordered list (ul) in general that this applies to, but rather to a specific item (li) within that list.

After you click OK, the new advanced selector is added to your stylesheet. In the Advanced view of the Stylesheet Editor, it will be shown under (Complex Selectors). With this advanced selector highlighted, you change the font color to blue.

And this is what you get as a result in the output:

For more about the nth-child and nth-of-type pseudo classes, see the following:

Pseudo Elements

In addition to pseudo classes, you can add pseudo elements to a style. Whereas a pseudo class focuses on the state of an element (e.g., change font color when hovered), a pseudo element focuses on a specific part of an element.

In the New Selector dialog you can use the Pseudo Element field to make a selection. In the Advanced Selector field, the two colons are added, followed by the pseudo element.

Example You want the first paragraph in some of your topics to start out with a letter that is larger and bolder than the rest of the characters.

To accomplish this, you select the p (paragraph) style in the Stylesheet Editor and click the New Selector button. In the Class Name field, you enter some text, such as FirstParagraph. Now you've got a style class that lets you make some paragraphs different from the rest.

Then you click the Advanced Options arrow to show the fields at the bottom of the dialog. The Advanced Selector field starts out showing only your main HTML element, followed by a period and the name of your class (p.FirstParagraph).

From the Pseudo Element field you select first-letter. This adds that pseudo class to the Advanced Selector field, after two colons.

After you click OK, the new advanced selector is added to your stylesheet. With this the first-letter pseudo element highlighted, you change the font size to 24 pt and the weight to bold.

Finally, for any paragraph that you want to use this advanced selector, you apply it in the XML Editor.

And this is what you get as a result in the output:

For more about pseudo elements in CSS, see the following:

http://www.w3schools.com/css/css_pseudo_elements.asp