HTML and CSS Reference
In-Depth Information
you don't wrap it in an HTML
<style>
block. The following code shows how you might import rules into one
external style sheet from another:
@import url(another.css);
/* Other style rules */
body {
font-family: Arial, Helvetica, sans-serif;
color: #000;
background-color: #FFF;
}
■
An external style sheet must
not
contain anything other than CSS style rules or CSS comments. You
cannot mix HTML, JavaScript, or anything else in a style sheet. If you do, your styles won't work.
Caution
Using a <style> Block
Using an HTML
<style>
block limits the style rules to the current page, so this technique should not be used
for styles that will be applied to multiple pages. One exception is when you're planning your site's design. Many
designers prefer to work in a single page to refine their ideas before moving the styles to an external style sheet.
Because they're embedded in the page, these are known as
embedded styles
.
To create a
<style>
block, you write the style rules in exactly the same way as in an external style sheet, and
wrap them in a pair of HTML
<style>
tags. For valid HTML 4.01 and XHTML 1.0, the opening tag must contain
type="text/css"
like this:
<style type="text/css">
/* Style definitions go here */
</style>
You can omit
type="text/css"
from the opening tag in HTML5.
In HTML 4.01 and XHTML 1.0, a
<style>
block can only be in the
<head>
of the page. HTML5 relaxes this
restriction, and introduces the concept of
scoped styles
in
<style>
blocks in the body of a page. A scoped
<style>
block in HTML5 applies highly localized styles to the current element and all the element's children (other
elements nested inside it).
The idea of allowing scoped styles inside the body of the page is controversial because it violates the
principle of separating content from presentation. However, one scenario where scoped styles could be useful
is with prestyled components or widgets, such as calendars or date-pickers that you want to drop into a page
without needing to update the site's main style sheet.
When using scoped styles, the
<style>
block must come before everything else inside the HTML element to
which the styles apply. The opening
<style>
tag requires the
scoped
attribute like this:
<div class="calendar">
<style
scoped
>
/* These styles apply only to the calendar widget */
table {
font-size: 11px;
background-color: teal;
}
</style>
<table>
<tr>. . . </tr>
</table>
</div>