HOUR 12:Styling with Code: Fully Immersed in CSS
Moving Styles to and from the External Style
After the external style sheet is attached to all the pages in your site, the styles set in
the kippleStyles.css file affect all the pages instead of just one. You have already created
many styles in different pages, but they are stored in the head of each page and not in
the style sheet. The obvious way to solve this is to cut and paste the code out of the
pages and into the style sheet, but this method is both cumbersome and prone to error.
Expression Web 4 provides a better solution in the form of the Manage Styles panel.
1. With the default.html file open, click and drag the body style from the Current
Page area down the kippleStyles.css area. When you let go, the style appears
below the kippleStyles.css heading.
For this exercise,it is a good idea to pin the Toolbar panel to the side and let the
Manage Styles panel cover the entire height of your screen. You can always unpin
the panel later.
2. Using the same method, move the rest of the styles, classes, and IDs from the
Current Page area to the kippleStyles.css area (see Figure 12.11).
3. When you finish moving all the styles, classes, and IDs to the kippleStyles.css
area, scroll to the top of default.html in Code view. Note that all the style code
is gone. All that is left is the
tag. In the Manage Styles panel, right-
click any of the styles and select Go to Code. The new kippleStyles.css style
sheet opens, and you can see that all the code previously housed in the head of
the HTML file is now in the style sheet.
4. Open myCameras.html. Note that the styles you just moved from default.html
now appear under kippleStyles.css in the Manage Styles panel for this page.
Using the same technique, move the styles from myCameras.html to
5. Press Ctrl+S to save the changes. This opens the Save Embedded Files dialog,
which asks whether you want to save the changes to the kippleStyles.css file
(see Figure 12.12). Click OK.
The kippleStyles.css file now contains all the styles from both default.html and
myCameras.html. Expression Web 4 still applies the styles to the content of those
pages, and they appear the same in Design view and in any browser you preview