Script, Tutorial, Free, CSS, Design: The <style> Element

As we saw in the initial CSS example, it is possible to add CSS code within the header of a Web page. This is done by using the <style> element, which is used to set CSS properties to a Web element that is applied to the whole of a Web document.

The <style> element is always contained within the header of a Web page, and unless overridden elsewhere in the Web page, its effects are applied globally to the selected HTML elements contained within it.

The <style> element has several attributes: accesskey, dir, disabled, lang, language, media, tabindex, title, and type, all of which are optional — and frankly, only a few of which are used routinely in practice. It is important to know the values of the attributes in those cases where it may be useful, however.

The accesskey attribute enables Web authors to assign a keyboard key to the <style> element. This keyboard "shortcut" enables the user to hit ALT plus the designated key which then selects the element.

The dir attribute is a standard HTML attribute that sets the text direction, and can take the values ltr and rtl (for "left-to-right" and "right-to-left," respectively). This does not necessarily switch the direction for displayed text, but instead is there to tell the browser which way it is meant to be read.

The disabled attribute — which is an unofficial attribute for <style> and is only supported within Internet Explorer version 4.0 and higher — indicates that the particular CSS function should not be "enabled" (in other words, that its effects should not be displayed). This is for use in circumstances where you may wish to disable the CSS formatting display in a particular place on the Web page. If you use this particular attribute, the content associated with the selected element is still displayed, but is not formatted in the CSS style indicated.

lang is another standard HTML attribute, and is used to set the language code (i.e., "english" or "french"). Internet Explorer 4.0 and up add an additional language attribute, which associates the element with a scripting language (like JavaScript or VBScript).

The media attribute is used to specify the type of medium for which the CSS formatting is to be used. There are nine distinct values: all, aural, braille, handheld, print, projection, screen, tv and tty, each reflecting the different types of media the Web page can be "viewed" in. The default value is screen (i.e., a computer screen). If a device exists to translate the Web page into a different medium (such as a digital video projector for the projection value, or a Palm device for the handheld value), the device will use the CSS elements associated with the particular style used for it. Actual support for most of these attributes has always been spotty, and on the whole you are probably better off trying to tailor your code for specific devices if you expect heavy use in these other media displays. (Also, as we will see, there are a number of media types called by the @media "at-rule" which accomplishes much the same thing, and is much more flexible.

tabindex is another accessibility attribute (like accesskey), and in this case it sets the tab order for the element. This relates to the order in which selectable elements on a page can be accessed when you hit the tab key repeatedly. Normally, when you do this, elements are selected in order from the top of the page to the bottom. But when you set an integer value to tabindex, you can interrupt this flow and make the element it is associated with either a priority tab-able item or not.

The type attribute simply specifies the MIME type contained by the <style> element. There are two possible values for this at the moment: "text/css", which applies to CSS, and "text/javascript", which applies to JavaScript code. For the most part, the text/css value is simply assumed, and the two major browsers do not have any problems interpreting CSS code when this value is not present. This attribute is widely recognized in all major browsers.

There used to be a common recommendation to surround the style element with comment elements (i.e., "") in case older browsers which do not recognize the element display the content contained within them. This concern is pretty much a thing of the past these days, and if you are truly concerned about your CSS code being displayed in an older browser, it's old enough so that you wouldn't seriously be coding CSS for it anyway.

<style> and CSS3

The CSS3 specification has introduced some interesting variations for the <style> element. These variations greatly extend the uses to which this element can be used for adding CSS code to a page. When adopted by browser manufacturers, they will enable Web authors to add code directly to the style attribute that otherwise would have had to have been added to the header of a Web page — greatly increasing coding flexibility. Say, for example, you are working with a standard template file for a Web site that contains the HTML header, and you either don't have ready access to changing it, or don't want to add code to the header of a page when you only intend to implement a single formatting instance limited to a single page. This would be a situation where the CSS3 extensions to the <style> element would help you out of a potential jam.

The first variant allows Web authors to add pseudo-elements to a particular Web element. Curly braces are wrapped around the "standard" CSS properties for a given element, and then the pseudo-element code is added, and the CSS properties associated with the pseudo-element are similarly wrapped in curly braces. The following code snippet makes this clear:

<p style="{background-color: black; color: white}

::first-letter

{color: red}">Some sample text</p>

(Note that in CSS3 double colons are recommended over single colons for pseudo-elements, hence "::first-letter" instead of ":first-letter"). Pseudo-elements are covered in detail in Chapter 7, "Pseudo-Elements, Pseudo-Classes and Selectors."

The second variation allows you to set the display properties on a link — something that hitherto would have had to have been set either in the header of a page or in an external style sheet. Like the first variant, the CSS properties are wrapped in curly braces, as the following line of code shows:

Visit <a href="http://www.captmondo.com"

style={color: navy}

:link {background: aqua}

:visited {background: red}

:hover {background: yellow}

:active {background: green}">captmondo.com</a>.

The third variation allows you to reference an external style sheet directly within an element. Again, this allows you to easily supercede any CSS code that may already be contained in the document, providing the flexibility of creating style sheets on an element-by-element basis if need be. The following line of code shows how this could be done: