Working with CSS background imagesLesson 8, Advanced CSS Layout 187Moving your internal styles to the external style sheet
Currently, the majority of the layout styles for this page are internal. However, these styles
will not automatically apply to new HTML pages that you might want to add. To avoid this
problem, you will cut the styles from this page and paste them into your base.css external
style sheet.1 In your 08_layoutwork.html document, select all the rules between your opening
<style> and closing </style> tags. Press Ctrl + X (Windows) or Command + X
(Mac OS) to cut the style rules.2 Choose File > Open, navigate to your web08lessons folder, and select the base.css style
sheet. This style sheet currently contains the style rules for your text. At the bottom
of the style sheet, after the last
- rule, press Return a few times to add some space,
and then press Ctrl + V (Windows) or Command + V (Mac OS) to paste all your rules.
Choose File > Save to save your changes.
3 Keep this fi le open because any future additions or modifi cations that you make to
your pages will be made here. Switch to your 08_layoutwork.html page and choose
File > Save. Preview it in your browser to ensure you followed the steps correctly. There
should be no change in the page. Your styles are now contained in the base.css page, not
the 08_layoutwork.html page.
Creating a style for the active page
Now that you have saved your styles in an external style sheet, you will create two new pages
that will use these styles: the Contact page and the About Us page. You’ll create additional
pages at the end of this lesson.1 In your 08_layoutwork.html page, choose File > Save As and rename this fi le
08_aboutus.html. Scroll to locate the heading 1 content: SmoothieWorld is your #1
destination for smoothie recipes. You’ll change this heading to help you identify this page, and
later you’ll add more content to this page. Type the following (highlighted in red):
<h1>About Us</h1>2 Add an ID to identify this page as the About Us page as you did with the home page
adding the following code (highlighted in red) to the body tag:
<body id= "aboutus" >Choose File > Save. Now you’ll add a rule to your style sheet to target the nav-about
class attached to your About Us link, as instructed in the next step.