HTML and CSS Reference
In-Depth Information
The net effect of the preceding code snippet is that the content of the
DIV
element is given a black
background (color #000000), whereas any text it contains is written in white (color #ffffff). That style
information is scoped to the specified
DIV
element and doesn't apply to any content outside of it.
This technique has both pros and cons, but the cons likely outweigh any pros. Inline styling just
works; it's easy to understand and quick to apply for everybody—experts and novices. But it has
critical drawbacks. In particular, the markup of pages gets fat and soon becomes harder to read and
understand. In addition, there's the potential for a lot of repetitive style details across the same page
and multiple pages. You should avoid inline styling as a bad programming practice or, at the very
least, you should limit its use to a small number of places where you want to make exceptions to more
general style rules created in CSS.
embedded styles
Another option is grouping style definitions in a few places within the HTML file. You can use a
STYLE
element, in fact, as the repository of custom styles. Within a
STYLE
element, you first identify the
target element and then define attributes that affect its appearance. The
STYLE
element is usually
located under the
HEAD
element at the top of the HTML page. You can have multiple
STYLE
elements
in any HTML page. Here's an example:
<html>
<head>
<style>
body {
background-color: black;
color: white;
}
</style>
</head>
...
</html>
As you may recognize, the content inside curly brackets describes the style to apply. The
expression you find just before the opening bracket—
body
in the previous example—indicates the
element (or elements) the style will apply to.
You'll see more detail about this point in just a few moments; for now, it's sufficient to say that the
expression that identifies the target of the style is referred to as the
selector
and can be the name
of a user-defined CSS class, the ID of a particular element, or the tag name of an HTML element. In
the previous example,
body
is the name of the main HTML element; so background and foreground
colors set through the style shown will affect the entire body of the page.
Although embedding
<style>
elements in an HTML page makes for a cleaner approach to
page authoring than inline styling, it is not a recommended practice. Compared to inline styling,
embedded styles promote the reuse of styles across multiple elements within the same page. On the
Search WWH ::
Custom Search