This is VERY interesting: Any selector that I did not cover in my EMBEDDED style sheet, is covered when I linked my EXTERNAL style sheet (CSS)! This CSS was linked to both Templates. I was totally confused at my end result of Template 1 at first, with both embedded and external CSS file used, but I finally figured it out. Tricky, but cool! Trying to set a margin on the right side of Template 2's "My Favorite" section was confusing -- as the embedded rule is 100% for the TABLE and I could not find a way to make this narrower via the external CSS (without modifying the HTML file). The only way to narrow it, is to put rules on the body -- but that really screwed up my webpage overall look! So, what I am learning here, is to keep the HTML very simple, without any rules. To put all the rules in the external CSS, unless you want specifics FOR THAT ONE WEBPAGE. That makes designing webpages so much more simple!

My Embedded Style Sheet in Template 1 is as follows: <STYLE TYPE="text/css"> <!-- BODY {color:blue; background: url(images/bg.gif); font-family:courier new, courier, monospace;} H1, H2, H3 {color: #CD7AF8; text-align: center;} UL, OL {background: #83F791; color: gray; font-variant: small-caps;} --> </STYLE>

For Template 2, I embedded the side graphic with the margins set on the body from the external CSS.