Embedded styles and external stylesheets are treated the same in the HTML DOM and therefore by JavaScript. By using the LINK element in the HEAD an external stylesheet is effectively inserted at that location in the document - just as if it were embedded.
To get or set styles which are in external/embedded stylesheets using JavaScript you treat them as objects:
document.styleSheets[0].cssRules[0].style.backgroundColor="#00FF00";
In programming the first number is 0 so styleSheets[0] points to the first (and perhaps only) stylesheet. This line of code changes the value for the background-color property for the first selector in the first stylesheet. This would normally be the BODY selector. You would need to be sure that the styles for the BODY come first in the stylesheet and were not moved. If someone inserted a selector before BODY in the stylesheet the style would be applied to that instead.
Note that if you correctly set the character set int he stylesheet by using "@charset "utf-8";" then that will be rule 0 and the styles will start at rule 1.
Allowing for non-standard browsers
This is one of those bits of the DOM which developed differently in different browsers. You will learn about how to allow for different browsers later. Once you know how to handle that problem you might want to use an IF statement to find out whether the browser supports stylesheet[0].cssRules[0] (the standard) or stylesheet[0].rules[0] (IE 7 and earlier).
Changing styles when you don't know the stylesheet structure
There is no easy way to refer to the styles by the selector text (e.g. stylesheet[0].body). There is a way to find the location of the rule you want but you will need some more JavaScript knowledge first. To find a rule in a stylesheet you will read each rule in turn and see if it is the one you want. That will be covered in the Intermediate JavaScript tutorial. For now stick with changing in-line styles with JavaScript if you struggle as they will override any external styles anyway.
