About page

If you want to keep the same basic code structure on a range of pages, but change the appearance of each page, one solution is the give each individual page it's own unique id. Then you can use descendant selectors to change the appearance of containers or elements that appear on all pages.

How do you give each page a unique id? The simplest method is to apply an id to the body element.

Let's take the case of a <ul> element that appears on each page. If you set an individual page with a unique id - like this - <body id="home"> or this <body id="about">, then you can use these unique ids to style the <ul> on the relevant pages. Like this:

#home ul { background; green; } #about ul { background: yellow;}

On any page that has the body set to id="home", the <ul> will have a green background. On any page that has a body set to id="about", the <ul> will have a yellow background.

Click on the side panel navigation links to see how individual pages can change in appearance without different code being used on the pages themselves.