Part of Lesson Plan: Make 3 web pages from one and manage with External CSS
Activity Overview / Details
Have all student open up their music page from the previous lesson, the one involving many new rules for CSS. Have them open it in a web browser and Notepad. Then have them pay attention to your screen.
Let’s look at some commercial web sites
Let’s pick some web sites that are professionally made and analyze the appearance all across the site. What do we see in common between all the pages within the site?
Let’s look at www.chevy.com and www.ford.com and move about a few of the web pages. Besides gawking at all the nice cars and trucks, can you notice what is common between all the pages at Ford, or all the pages at Chevy? They have a common appearance, a common color theme involving color of backgrounds, pictures, size and shape. The main thing that changes is the content between each page, but the general theme stays the same all throughout the site.
Take a look at www.espn.com and you’ll see the same thing. We could pick out almost any professional web site involving almost any business, sport, school, or government site and it will always show common thematic appearance across the entire site.
Can you imagine working for a company like Chevy as one of the web designers or developers, and the boss orders a change of the background color and picture resulting in necessary color changes of text and borders? There’s perhaps 100 web pages in which you’d have to make major changes involving backgrounds, colors of text and borders, etc, etc… Can you imagine doing such a thing? Changing hundreds or maybe thousands of lines of code in all the web pages? No way!
So to make life easier, we introduce the idea of External CSS files. One file takes care of the CSS rules for the entire site. A few changes and we’ve changed the entire looks of the site.
This is what you’re going to do today. You’ll export the CSS rules in your existing music web page and put it into an external CSS file and then make 2 more pages in just a few minutes, a page about your family and one about your school. This will be so much easier now that we’re going to use external CSS. So watch how we’ll do it.