The style element allows authors to include CSS code into the HTML document.
The style tag should be placed in the head element.
To include an external CSS file into the HTML document, use the link element or the @import at-rule.
If you want to import a CSS file into another CSS file, use the @import at-rule.
See Example 2.
If you need to modify the contents of a style sheet dynamically, use the styleSheet object and the cssRules and rules collections.
See Example 3-5.
Occurs when the load state of the data that belongs to an element or a HTML document changes.
Example HTML code 1:
This example illustrates the use of the style element:
<head><style>#sampleID {color:red;}
.sampleClass {color: green;}
b {color: blue;}
</style></head><body><divid="sampleID">The color of this text is red.</div><divclass="sampleClass">The color of this text is green.</div><b>The color of this text is blue.</b></body>
This example shows how to change a style rule in an embedded style sheet:
<head><style>.red {
color: red;
}
</style><scripttype="text/javascript">function ChangeRedColor () {
// the first style sheet in the document
var sheet = document.styleSheets[0];
// the first rule in the style sheet
var rules = sheet.cssRules ? sheet.cssRules : sheet.rules;
var firstRule = rules[0];
// change the color
firstRule.style.color = "#00ff00";
}
</script></head><body><buttononclick="ChangeRedColor ()">Change the color of the '.red' style rule!</button><br/><br/><divclass="red">red division</div><div>non-red division</div><spanclass="red">red span</span></body>
This example is the same as the previous one, but it uses the sheet and styleSheet properties of the style element to get the style sheet:
<head><styleid="myStyle">.red {
color: red;
}
</style><scripttype="text/javascript">function ChangeRedColor () {
var styleTag = document.getElementById ("myStyle");
// the style sheet in the style tag
var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
// the first rule in the style sheet
var rules = sheet.cssRules ? sheet.cssRules : sheet.rules;
var firstRule = rules[0];
// change the color
firstRule.style.color = "#00ff00";
}
</script></head><body><buttononclick="ChangeRedColor ()">Change the color of the '.red' style rule!</button><br/><br/><divclass="red">red division</div><div>non-red division</div><spanclass="red">red span</span></body>
This example shows how to change a style rule in an external style sheet:
Code
red.css
<head><styleid="myStyle">@import"red.css";
</style><scripttype="text/javascript">function ChangeRedColor () {
var styleTag = document.getElementById ("myStyle");
// the style sheet in the style tag
var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
if (sheet.cssRules) { // all browsers, except IE before version 9
var rule = sheet.cssRules[0];
// we know that the rule is a CSSImportRule
var importedSheet = rule.styleSheet;
}
else { // Internet Explorer before version 9
var importedSheet = sheet.imports[0];
}
// the first rule in the style sheet
var rules = importedSheet.cssRules ? importedSheet.cssRules : importedSheet.rules;
var firstRule = rules[0];
// change the color
firstRule.style.color = "#00ff00";
}
</script></head><body><buttononclick="ChangeRedColor ()">Change the color of the '.red' style rule!</button><br/><br/><divclass="red">red division</div><div>non-red division</div><spanclass="red">red span</span></body>
