untitled

(John Hannent) #1
<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 . These simplifica-<br /> tions make it easier for you to see the idea being illustrated in the code,<br /> without unnecessary distractions like two separate files and extraneous<br /> HTML code.</p><br /> <p>In this example, an ID style named HIGHLIGHTis created in the header and<br /> then used in the body of this Web page where the ID is referenced.</p><br /> <pre><code><HTML><br /> <head></code></pre><br /> <pre><code><style><br /> #highlight {color: yellow; font-style: italic;}<br /> </style></code></pre><br /> <pre><code></head><br /> <body></code></pre><br /> <h4>Chapter 2: Getting Results with CSS 39</h4> </div> <meta itemprop='headline' content="p 58: Chapter 2: Getting Results with CSS 39 - untitled - free download pdf - issuhub"> </div> <div role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement"> <span itemprop="url"><b><a href="/view/index?id=6126&pageIndex=57" rel="previous" itemprop="name">← Previous</a></b></span> <span itemprop="url" class="mx-3"><b><a href="/view/index?id=6126&pageIndex=59" rel="next" itemprop="name">Next →</a></b></span> </div> <div style=" text-align: center; margin: 20px auto; padding: 13px; width: 240px; font-size: 20px; "> <a class="page-link" style="background-color: #72bf86;" target="_blank" href="/view/index?id=6126&pageIndex=57#bookdownload" title="Free download pdf" >Free download pdf</a> </div> </div> <div class="footer"> <div class="container"> <div class="row"> <div class="col-lg-3 ml-lg-auto mb-5 mb-lg-0"> <div class="mb-4"> <h5 class="text-dark">Get our desktop app</h5> </div> <a class="btn btn-icon btn-indigo rounded-circle mr-2" target="_blank" href="/download/issuhub.dmg"> <i class="fa fa-apple"></i> </a> <a class="btn btn-icon btn-indigo rounded-circle" target="_blank" href="/download/issuhub.exe"> <i class="fa fa-windows"></i> </a> </div> <div class="col-6 col-md-3 col-lg mb-5 mb-lg-0"> <h5 class="text-dark">Company</h5> <!-- Nav Link --> <ul class="list-unstyled mb-0"> <li class="my-2"><a href="/about">About</a></li> <li class="my-2"><a href="/contact">Contact</a></li> <li class="my-2"><a href="/news/index">News</a></li> </ul> <!-- End Nav Link --> </div> <div class="col-6 col-md-3 col-lg mb-5 mb-lg-0"> <h5 class="text-dark">Features</h5> <!-- Nav Link --> <ul class="list-unstyled mb-0"> <li class="my-2"><a href="/quick">Quick Start</a></li> <li class="my-2"><a href="/desktop">Desktop</a></li> <li class="my-2"><a href="/editor-help">Editor</a></li> </ul> <!-- End Nav Link --> </div> <div class="col-6 col-md-3 col-lg"> <h5 class="text-dark">Documentation</h5> <!-- Nav Link --> <ul class="list-unstyled mb-0"> <li class="my-2"><a href="/support/index">Support</a></li> <li class="my-2"><a href="/site/pricing">Pricing</a></li> </ul> <!-- End Nav Link --> </div> <div class="col-6 col-md-3"> <h5 class="text-dark">Resources</h5> <!-- Nav Link --> <ul class="list-unstyled mb-0"> <li class="my-2"> <a href="/tutorial" target="_blank"> <span class="media align-items-center"> <i class="fa fa-info-circle mr-2"></i> <span class="media-body">Tutorial</span> </span> </a> </li> <li class="my-2"> <a href="/site/login"> <span class="media align-items-center"> <i class="fa fa-user-circle mr-2"></i> <span class="media-body">Your Account</span> </span> </a> </li> </ul> <!-- End Nav Link --> </div> </div> </div> </div> <div class="footer"> <div class="container"> <div class="row"> <div class="col-md-6 mb-4 mb-md-0"> <!-- Nav Link --> <ul class="nav nav-sm nav-white nav-x-sm align-items-center"> <li class="my-2"> <a href="/privacy">Privacy & Policy</a> </li> <li class=" opacity my-2 mx-3">/</li> <li class="my-2"> <a href="/terms">Terms</a> </li> </ul> <!-- End Nav Link --> </div> <div class="col-md-6 text-md-right"> <ul class="list-inline mb-0"> <!-- Social Networks --> <li class="list-inline-item"> <a class="btn btn-xs btn-icon btn-soft-light" href="https://www.facebook.com/Issuhub-Flipbook-2315543688769343/"> <i class="fa fa-facebook text-dark"></i> </a> </li> <li class="list-inline-item"> <a class="btn btn-xs btn-icon btn-soft-light" href="https://twitter.com/IssuhubBooks"> <i class="fa fa-twitter text-dark"></i> </a> </li> <!-- End Social Networks --> </ul> </div> </div> <!-- Copyright --> <div style="text-align: center;"> <div >© ISSUHUB. 2024. All rights reserved.</div> </div> <!-- End Copyright --> </div> </div> </div> </div> <script src="/assets/6df76c57/assets/js/vendors/jquery-3.2.1.min.js"></script> <script src="/assets/6df76c57/assets/js/vendors/bootstrap.bundle.min.js"></script></body> </html>