HTML and CSS Reference
In-Depth Information
The style element contains style information applicable to the current document. In HTML, this is almost
always written in CSS. Other style languages could be used for other types of structured documents, but in
HTML—and as far as we're concerned for this topic—CSS is the only style language that matters.
The optional type attribute indicates the content type of the enclosed style data, which is text/css for
CSS, and browsers will assume that content type if the type attribute is omitted. The entire contents of the
style element are hence written in the CSS language; the style element can't contain any HTML, so no
nested elements are allowed and comments inside a style element must be CSS comments, not HTML
Listing 3-4 shows an example of a simple style sheet enclosed in a style element.
Listing 3-4. CSS rules embedded in a style element
<!DOCTYPE html>
<meta charset="utf-8">
<title>Power Outfitters Superhero Costume and Supply Co.</title>
<style type="text/css">
body { background-color: ivory; color: navy; }
h1 { font-size: 1.6em; color: crimson; }
<h1>Welcome, Heroes!</h1>
<p>Power Outfitters offers top of the line merchandise at
rock-bottom prices for the discerning costumed crime-fighter.</p>
Because this style information is included as part of the HTML document, it's known as an embedded style
sheet , or sometimes an internal style sheet . Style sheets embedded in style elements are most useful for
one-off, standalone web pages where those style rules don't need to be shared by any other documents.
Otherwise, for websites consisting of numerous pages that should share common styles, it's much more
practical to link to a separate external style sheet by way of a link element.
A single document can have any number of style elements, and like the link element, an optional media
attribute can indicate the specific media for which those styles are intended. Also like the link element,
the style element's media attribute can carry a media query, though older browsers may not support it.
When the media attribute is absent, the browser will use the enclosed styles for all media by default (the
same as including media="all" ).
The scoped Attribute
Ordinarily, a style element can only appear within the head element, and placing a style element
anywhere else in the document isn't valid. But that could change in HTML5 with the introduction of the
scoped attribute. This Boolean attribute, when present, allows a style element to appear outside the
Search WWH ::

Custom Search