Marco Conceptual

In this section, I use the SharePoint core style sheet called ^core.css to illustrate the use of the Apply Styles task pane.

FIGURE 12.11

Deleting styles by using SharePoint Designer

NOTE NOTE

To view the styles applied to a SharePoint Web page, open the Web page in SharePoint Designer.

When you open the Apply Styles task pane, a number of styles appear in the Select CSS style to apply list, as shown in Figure 12.12.

The Apply Styles task pane lists the CSS styles that are applied to the Web page that’s active in SharePoint Designer. The CSS styles from the style sheets attached to the active Web page are listed along with the styles that have been applied in-line or in-page. The Apply Styles task pane also shows a preview of the style in the Select CSS style to apply list. If you hover over a style, the code for the style is displayed in a screen tip.

The Apply Styles user interface uses the following icons to differentiate among the various styles:

n Green Dot: Indicates that the style is a CSS class either defined in-line on the Web page or in a separate style sheet

n Encircled Green Dot: Indicates that the style is a CSS class being used on the current page n Blue Dot: Indicates that the style is a CSS rule either defined in-line on the Web page or

in a separate style sheet

n Encircled Blue Dot: Indicates that the style is a CSS rule being used in the current page n Red Dot: Indicates that the style is a CSS rule, which matches using the ^id attribute of a tag n Encircled Red Dot: Indicates that the style is a CSS rule based on matching ^id and is

being used in the current page

NOTE NOTE

understandable when you collapse the headers in the list. Because the core.css is the main style sheet file for SharePoint Web sites, you almost always see styles from this file listed in the Apply Styles task pane when working with SharePoint Web pages.

The Options dropdown menu in the top-right corner of the Apply Styles task pane allows you to categorize the styles being shown in the Select CSS style to apply list in the following ways:

n Categorize By Order: Selected by default, categorizes the styles in the order they’re encountered in the associated file

n Categorize By Type: Categorizes the styles based on the type. For example, with this option selected, the CSS classes are grouped together.

n Show All Styles: Selected by default, shows all the styles that are available either in-line, in-page, or in an external style sheet linked to the Web page active in SharePoint Designer

n Show Styles Used In Current Page: Shows styles that are being used on the current page only. Selecting this option ensures that you only see the encircled green or blue styles in the list.

n Show Style Used On Selection: Shows the styles being used on the currently selected item in the active Web page

n Preview Background Color: Allows you to change the background color used when showing the style in the Select CSS style to apply list

FIGURE 12.12

The Apply Styles task pane showing the styles in the core.css style sheet

FIGURE 12.13

The collapsed view of the list of styles in the Apply Styles task pane

The Select CSS style to apply list shows the Clear Styles option at the top of the list. This option can be used to clear the styles from the selection made in the currently active Web page.

When you right-click on a style that shows up in the Select CSS style to apply list, a popup menu appears with the following options:

n Apply Style: Applies the style to the selection made in the document

n Go to Code: Takes you to the location on the Web page or the style sheet where the style is defined

n Select All Instances: Highlights all instances where the style is being used on the cur-rently active Web page

n New Style: Allows you to create a new style by using the New Style dialog box n New Style Copy: Allows you to create a new style based on the selected style n Modify Style: Allows you to modify the style by using the Modify Style dialog box n Rename Class: Allows you to change the name of the CSS class

n Delete: Deletes the CSS style

n Remove Link: Enabled when the header in the Select CSS style to apply list is right-clicked on, this option allows you to remove the link to the style sheet from the document.

n Attach Stylesheet: Allows you to attach a style sheet to the active Web page by using the Attach Stylesheet dialog box

n Manage Stylesheet Links: If you have multiple style sheets associated with the active document, you can use this option to manage style sheet links.

n Remove Class: Removes the CSS class from the selection in the active Web page n Remove ID: Removes the CSS IDs from the selection in the active Web page

n Remove Inline Style: Removes in-line styles from the selection in the active Web page

The Apply Styles task pane also allows you to attach new style sheets to the currently active docu-ment by using the Attach Style Sheet link. As shown in Figure 12.14, the Attach Style Sheet dialog box that opens when you click the Attach Style Sheet link allows you to specify the URL of the external style sheet.

FIGURE 12.14

The Attach Style Sheet dialog box

You can choose if you want to add the style sheet link only to the current page, selected pages, or all HTML pages inside a Web site. If you choose to attach as a link, a style sheet link is inserted into the Web page. Choosing to import the style sheet copies all the styles from the style sheet into the Web page as in-page styles.