HTML and CSS Reference
The default.css file contains the style information for the default.html page. If you want to reuse
the same style settings in another page—for example, mypage.html —then you could copy default.css
settings to a new file called mypage.css . That works, but there should be a better way of achieving the
same results (and there is).
As in Figure 6-4, right-click the Css project folder and select Add | New Item. From the next
window, select the Style Sheet item and name it after the project—in this case, name it todolist.css .
Copy the content of the body, header, and footer CSS classes to your new todolist.css file.
FIGURE 6-4 Adding a custom CSS file.
At this point, you have a global CSS file where you plan to store all global style sheet settings; in
addition, you have a page-specific CSS file where you need only those CSS styles that affect elements
in that specific page. To make the global CSS file visible to any page, you need to add an extra line in
all the pages that represent an application screen. So far, you just need to do that for default.html .
<!— TodoList references —>
<link href="/css/todolist.css" rel="stylesheet" />
<link href="/css/default.css" rel="stylesheet" />
You can run the application now and it should look similar to Figure 6-5. Admittedly, this is still a
fairly scanty application, but at least you have learned a couple of very useful techniques for reusing
markup and style.