How to create an external style sheet
Figure 3-12 shows how to create an external style sheet. After you click on the plus icon in the Sources pane of the CSS Designer, you select Create a New CSS File. That will display the dialog box shown at the top of this figure.
In this dialog box, you can enter a name for the CSS file. In addition, you can identify a folder within the website where you want to store the file. In this example, I didn’t specify a location, so the file will be stored in the root folder for the site. However, CSS files are typically stored in a folder named styles within the root folder.
By default, a link element is added to the head element of a document when you create a new CSS file. It will attach the file to the document. For example, the link element that’s generated for the file in this figure will look like this:
<link href="styles.css" rel="stylesheet" type="text/css">
Remember, though, that the type attribute isn’t required for HTML5.
You can also use the Create a New CSS File dialog box to specify a condition under which a style sheet is used. For example, you may want the style sheet to be applied only when a page is being printed. You’ll learn more about that later in this chapter.
After you create a style sheet, it will appear in the Sources pane of the CSS Designer. Then, you can select it to add style rules to it. If more than one style sheet is associated with a document, you can also click the ALL SOURCES option in the Sources pane to display all the selectors in all the style sheets.
How to create an external style sheet using the CSS Designer
- Click the Add CSS Source (+) icon in the Sources pane and select Create a New CSS File to display the dialog box shown above.
- Enter the name of the file in the File/URL text box to add it to the root folder of the website, and click OK. Or, click the Browse button, select a location from the Save Style Sheet As dialog box that’s displayed, enter the name of the file in the File Name text box, and click Save.
Description
- When you create an external style sheet with the Link option selected, a link element that identifies the style sheet is added to the head element of the document.
- If a document is associated with more than one style sheet, you can click the ALL SOURCES option in the Sources pane to display the selectors in all the style sheets.
- External style sheets are often stored in a separate folder of a website. To add a folder, right-click on the folder that will contain it, select New Folder from the menu that’s displayed, and then enter a name for the folder.
- Because an external style sheet separates the formatting (CSS) from the content (HTML), we recommend that you use them for all production applications. External style sheets can also be attached to more than one web page.
How to move style rules and copy styles
As you create the style rules for a document, you may decide that you want to store one or more of them in a style sheet other than the one where they were originally created. In that case, you can use the procedure in figure 3-13 to move the style rules from one style sheet to another.
This is particularly useful if you start to format a document by using an embedded style sheet and then later decide that you want to store the style rules in an external style sheet. It’s also useful if you have two or more external style sheets attached to a document and you want to move styles between those style sheets.
After you move style rules from one style sheet to another, you may want to remove a style sheet from the Sources pane as described in this figure. Note, however, that this doesn’t delete the CSS file for the style sheet. As a result, you can still attach it to your web pages.
In addition to moving style rules from one style sheet to another, you can copy styles from one style rule to another. To do that, you use the shortcut menu that’s displayed when you right-click a selector in the Selectors pane. You can use this menu to copy all the styles in a style rule or just the styles in a specific category, such as layout styles or text styles. Then, you can right-click on another selector and choose Paste Styles to paste the copied styles to the style rule for that selector. This is useful if you need to include similar styles in two or more style rules. After you copy the styles, of course, you can change them any way you want.
How to move style rules
- Select the style sheet that contains the style rules you want to move in the Sources pane of the CSS Designer to display the selectors it contains in the Selectors pane.
- Select the selectors you want to move to another style sheet and then drag and drop them onto that style sheet in the Sources pane.
How to copy styles
- Right-click the selector whose style rules you want to copy in the Selectors pane, and choose Copy All Styles to copy all the styles, or choose an item from the Copy Styles submenu to copy a specific type of style.
- Right-click the selector where you want to copy the styles and choose Paste Styles.
Description
- You can use the first procedure shown above to move style rules from any style sheet to any other style sheet.
- If you move all of the style rules in a style sheet to another style sheet, you can remove the style sheet from the Sources pane by selecting it and then clicking the Remove CSS Source icon (-). Note that this doesn’t delete the style sheet.
- You can use the second procedure shown above to copy styles from one style rule to another.
