<p>ordinary default text </p>
<p id=”highlight”>highlighted text </p>
<p id=”highlight”>second attempt to use this id fails
</p>
<h1 id=”highlight”>highlighted text </h1>
</body>
</html>
All three uses of HIGHLIGHTin this example turned the lines of text yellow
and italic when I loaded this file into Internet Explorer. What gives? Just the
usual. Somebody makes a rule, and somebody else ignores it. In any case,
perhaps ID styles will be useful in CSS at some future date, so at least take a
brief look at them. (ID attributes in HTML code are very useful if you’re using
ASP.NET or other programming such as scripting. In those cases, the ID
allows your programming to affect elements by specifying their unique ID
attribute. IDs also play a role in building templates. More on scripting in
Chapter 16.)
You use the hash symbol (#) to create a CSS ID rule. This next example puts
the CSS definition right in the header of an HTML page. This is called an inter-
nal style sheet. You can use this option instead of creating a separate CSS file.
External, separate CSS style files are considered the best practice for most
Web sites, however, because they can enforce rules across multiple pages,
and also make it easy to modify the rules in one place only.
For convenience in illustrating CSS in this book, I almost always put style defi-
nitions in the header of an HTML page. This way, everything — the definition
and its use — is together in the same file. And I also omit some useful, but
unnecessary, elements in the HTML such as the
tions make it easier for you to see the idea being illustrated in the code,
without unnecessary distractions like two separate files and extraneous
HTML code.
In this example, an ID style named HIGHLIGHTis created in the header and
then used in the body of this Web page where the ID is referenced.
<HTML>
<head>
<style>
#highlight {color: yellow; font-style: italic;}
</style>
</head>
<body>