HTML and CSS Reference
In-Depth Information
embedded styles
CSS rules can also be included in an HTML page, typically in the
<head>
section of the document. This
technique is known as
embedding
. CSS rules are embedded through use of the
<style>
tag, like this:
<style type=”text/css”>
body {
margin: 0;
padding: 0;
background-color: white;
}
h1, h2, h3, h4 {
color: red;
margin: 0;
padding: 5px;
}
</style>
As mentioned earlier, if the same CSS rule is both included in an external style sheet and embedded,
the embedded rule has precedence. The obvious disadvantage to embedding rather than linking to
an external style sheet is that CSS modifications apply only to a single page. Updates to multiple
pages with embedded styles require multiple steps.
inline styles
The final method for styling HTML tags is called
inline
styles. An inline style is applied by use of
the style attribute within an HTML tag. For example, if you want to color an
<h1>
tag red with in
an inline style, your code would look this:
<h1 style=”color:red;”>Important Message Ahead</h1>
You'll notice the resemblance between the inline style and the pre-CSS technique for changing
the look-and-feel of a tag. Not surprisingly, the inline style has the same drawback as the pre-CSS
attribute-based method of being difficult to update. For this reason, inline styles are rarely used by
designers when creating web pages.
Currently, inline styles do have one practical use: HTML e-mails. E-mail pro-
grams do not recognize embedded or external style sheets across the board. To
achieve universal acceptance, designers are forced to incorporate inline styles
to add flair to their e-mails.
workinG wiTH seLecTors
This lesson has touched on the use of selectors in creating CSS rules and now it's time to dive in a
little deeper. There are basically four different types of selectors:
➤
➤
Tags:
An HTML tag can serve as a CSS selector.
