The STYLE element allows greater flexibility for authors to define style rules in the HEAD of a document.
The styles are applied to the corresponding selectors ( elements, classes, and IDs ) within that page. This is useful when styles for several elements will repeatedly be used within a document.
In this case, we define the rule sets within <STYLE></STYLE> tags, as follows:
<html>
<head>
<title>...</title>
<style type="text/css">
<!--
We declare style rules for each selector that we want to format here.
-->
</style>
</head>
The STYLE element requires the type attribute, which tells a browser the type of content within the element, which is style data.
This ensures that non-conforming user agents do not render the content as part of the document’s text. Both the start and end tags are required.
Note that the actual style specifications are embedded inside a pair of HTML COMMENT tags (<!-- and -->).
This further ensures that the style data within the STYLE tags, which are unknown to older browsers, would safely be treated as comments that are not to be displayed. Both the start and end tags are required.
The following CSS declaration will color every H1 element in the document blue and center it on the page.
<head>
<style type="text/css">
h1 {color: blue; text-align: center}
</style>
</head>
To specify that this style information should apply only to H1 elements of a specific class, we modify it as follows:
<head>
<style type="text/css">
h1.myclass {color: blue; text-align: center}
</style>
</head>
<body>
<h1 class="myclass">This will apply the style.</h1>
<h1>This one will not.</h1>
</body>
Style definitions for a class must begin with a dot (.) and immediately followed by the class name.
In the example above, the class myclass has been attached to an H1 element (H1.myclass). This means that the class style definition applies only to H1s.
Classes which can be used with any HTML element can also be declared, by omitting the element identifier in the selector. For instance, the following style declaration for a class can be applied to any element whose class= attribute is set to "small":
.small {font-size: 9pt; color: #600}
Finally, to limit the scope of the style information to a single instance of H1, we set the element’s ID attribute, and define a style for that ID:
<head>
<style type="text/css">
#myid {color: blue; text-align: center}
</style>
</head>
<body>
<h1 class="myclass">This H1 is not affected.</h1>
<h1 id="myid">This H1 will apply the style.</h1>
<h1>This H1 will not.</h1>
</body>
ID style definitions must begin with a hash (#) and immediately followed by the ID name.
Note that the element name is not needed in the ID style selector, as the ID attribute must be unique in a document, meaning only one element ( which can be any element ) can use a particular ID value.
For more information, see Element Identifiers, and the ID and CLASS attributes in the properties reference.