I thought I understood about putting an embedded style sheet in to change a secondary page layout, but I can't quite grasp the details...

I have an index.html page which links to an external style sheet:

<!--BEGINNING OF EXTERNAL SYLE SHEET-->
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>
<!--END OF EXTERNAL STYLE SHEET-->

I now want to install an embedded style sheet to change a few things in a secondary page, which I named Subpage 1. From what I gather, I need to add an Embedded Style sheet into the index.html page in order to make the minor adjustments I want in Subpage 1. The changes in Subpage 1 will be removing the right column of 160 px, but leaving a 2px border at the far right. The only other change, will be to extend the content, which is now contained in a 500px width into the removed right column.

The index.html code for the external style is:

<div id="rightnav">

The External Style is:

#rightnav {
background-image:url(images/camoside-lr-long.gif);
float:right;
width: 160px;height: 600px;
border-right: solid 2px #a5a070; border-left: solid 2px #a5a070;
}

Subpage 1 will have just two changes. If I read this right, I need to put the embedded style just under the external style like this:

<!--START OF EMBEDDED STYLES FOR SUBPAGE 1-->

<style TYPE="text/css">
#rightnav { width: 0px; height: 600px;
border-left: solid 2px #a5a070;}

#content
{margin-left: 170px; margin-right: 10px;}
}

*I'm not sure if the #content is the right code that I changed to move the content text over...whatever I changed it moved the text 10px from the existing left column, extended the text and gave me 10px margin on the far right.

<!--END OF EMBEDDED STYLES FOR SUBPAGE 1-->

James gave me some excellent advice on this, but for some reason, I am too dense to figure it out.

__________________
SgtMac66

Macs RevWar

Let me try again to explain this again and keep it as simple as possible. I don't think it is as difficult as it appears to you now. This time I will ignore some unlikely complexities. Once you get it up you will see how it works and can fix any details.

First, ignore the css page altogether. Put nothing extra on it. It will apply to all the other pages and to most of the index page.

Second, on the index page just delete the html for the right column. Voila, it is gone!

Third, put this into the head of your html on the index page (put it at the end of the head to make sure it is after the reference to the external css):

<style type="text/css">
#content {
width: 660px;
margin-left: 170px;
margin-right: 10px;}
</style>

This is based on your main column being given an id of "content" which is what I picked up from your post. All that stuff about subpages and the like are unneeded. There isn't any subpage. You are just putting different content on some pages than others.

The html for the index page can be different as all other pages can and you can leave out the right column just as easily, almost, as leaving out a paragraph. By putting the css style in the head (this is the way the embedded style works) it will override what is in the style sheet and make the main column wider.

After you do the above take a look. If you need to add a border or some of those other items, just add it to the css in the head. If something like a border is there from the external css that you don't want, put something like a border: none in the head css (embedded css).

__________________
Good Success!

Douglas County Master Gardeners
"We don't always get what we want, but we always get what we expect."

See, I knew about 'internal' stylesheets, but not embedded ones. Is that the new term?

__________________

LOL buddy

Hey, just before you posted, I think...I think....I figured out how it worked...your right, this stuff seems way too complex than it is...lol!

Yeah, I now have my two pages...the index and my secondary with the minor changes...great work their James...I like this embedded style, much more than trying to put everything on the external sheet. Thanks for the great tip!!

I think I am about ready to validate this code and see if I have stuff right...After that I am ready to add my content...

__________________
SgtMac66

Macs RevWar

Dee...My understanding is that there are three types...Inline, Embedded and External...I think embedded and Internal are one in the same? The frustrating part of this CSS on the net, is that some guys have their own version of what this stuff is called...I see Internal Styles named quite a bit...Really confuses us when trying to learn different techniques..

James...posted the secondary page on the site...click on Revolutionary War...should take you to the new page...I hope, lol!

Got a lot of other stuff I want to do on the layout......but for now I am ready to add all that content I have been writing all these months...

__________________
SgtMac66

Macs RevWar

Yeah all that toemato/tomatoe stuff can really throw a newbie.

__________________

Right, embedded and internal are the same. I have read embedded more often, but I think more and more the use of internal is used. It is important to understand how these relate. This is the basis of the "cascading" in the name css (cascading style sheets).

A very clear, simple explanation is found in the htmldog.tutorial on css.

Basically, external style sheets apply first, then embedded, then inline. So inline rules (although it should rarely if ever be used). However placement in the embedded (internal) style—in the head—is important. "If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!"

The same is true of multiple external style sheets. On my Master Gardener site I have two. One is from the University of Minnesota master template info so I do not want to mess with it. The second is one I made. By listing mine after the one from the university, mine overrules the first.

Not to add confusion, but this is yet another way the Sgt. in the posts above could have done his index page. If there had been a lot of changes (which was not true in this case) he could have just listed a second external style sheet in the head and it would have "cascaded" into prominence. Any setting in it would have ruled over the first. Everything else in the first would still apply.

__________________
Good Success!

Douglas County Master Gardeners
"We don't always get what we want, but we always get what we expect."

James...thanks so much for explaining that in my terms, lol! Also for the link. I have printed your comment and the html dog links for future reference...It's starting to make sense now after 3 days of frustration.

__________________
SgtMac66

Macs RevWar