HTML and CSS Reference
In-Depth Information
If a second paragraph is added, it has the
same style as the first paragraph because
they both match the rule:
<body>
<p>A paragraph
<em>with emphasis</em>
</p>
<p>Another paragraph</p>
</body>
These are called
type selectors
because they
match any element of the stated type.
In the previous example, the style rules are included directly in the
HTML
inside a
<style>
element. This is just one way of applying
CSS
to
your web pages; the next section will summarize the alternatives.
Adding a style sheet to your HTML
There are four ways to include
CSS
in
HTML
. At the lowest level, you
can apply it directly to individual elements with the
style
attribute.
This is known as an
inline style
:
<p style="color: red;">Another paragraph</p>
This rule makes just this one paragraph have red text, but it has no
effect on any other paragraphs in your document. The limited impact
of the
style
attribute means it's the least efficient way of applying
CSS
;
it's usually only seen on elements unique within a site, when people are
creating copy-and-paste widgets, or to work around a localized cross-
browser issue.
Slightly more useful is the
<style>
element used earlier. The
<style>
ele-
ment should appear in the
<head>
element of the
HTML
document,
although all popular browsers will use the styles if they're added to the
body instead. Rules in a
<style>
element apply to everything in that page:
<style> p { color: red; } </style>
The main benefit of this approach over inline styles is that you can con-
trol the styles of multiple elements from a single rule, but they still only
