Web Development and Design Foundations with XHTML, 5th Edition

(^84) Chapter 3 Configuring Color and Text with CSS
Open the file in Notepad and view the source code. Notice that the XHTML code uses
the

,

elements. In this Hands-On Practice you’ll code
embedded styles to configure selected background and text colors. You’ll use the body
selector to configure the default background color (#E6E6FA) and default text color
(#191970) for the entire page. You’ll also use the h1and h2selectors to configure dif-
ferent background and text colors for the heading areas.
Edit the embedded.html page in Notepad and add the following code below <br /> element in the head section of the Web page.</p><br /> <style type="text/css"><br /> body { background-color: #E6E6FA;<br /> color: #191970;<br /> }<br /> h1 { background-color: #191970;<br /> color: #E6E6FA;<br /> }<br /> h2 { background-color: #AEAED4;<br /> color: #191970;<br /> }<br /> </style><br /> Save and test your file in a browser. Figure 3.7 (shown also in the color insert section)<br /> displays the Web page along with color swatches. The monochromatic color scheme<br /> was chosen using the Color Blender at [http://meyerweb.com/eric/tools/color-blend.](http://meyerweb.com/eric/tools/color-blend.)<br /> Notice how the repetition of a limited number of colors adds interest and unifies the<br /> design of the Web page.<br /> View the source code for embedded.html and review the CSS and XHTML code. Note<br /> that all the styles were located in a single place on the Web page. Since embedded styles<br /> are coded in a specific location, they are easier to maintain over time than inline styles.<br /> Also notice that you only needed to code the styles for the h2selector once (in the head<br /> Figure 3.6<br /> The Web page<br /> without any styles </div> <meta itemprop='headline' content="p 103: (^84) Chapter 3 Configuring Color and Text with CSS Open the file in Notepad and view the source code. Notice that the XHTML cod ... - Web Development and Design Foundations with XHTML, 5th Edition - free download pdf - issuhub"> </div> <div role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement"> <span itemprop="url"><b><a href="/view/index?id=22711&pageIndex=102" rel="previous" itemprop="name">← Previous</a></b></span> <span itemprop="url" class="mx-3"><b><a href="/view/index?id=22711&pageIndex=104" 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=22711&pageIndex=102#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>  <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>  </div> <div class="col-6 col-md-3 col-lg mb-5 mb-lg-0"> <h5 class="text-dark">Features</h5>  <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>  </div> <div class="col-6 col-md-3 col-lg"> <h5 class="text-dark">Documentation</h5>  <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>  </div> <div class="col-6 col-md-3"> <h5 class="text-dark">Resources</h5>  <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>  </div> </div> </div> </div> <div class="footer"> <div class="container"> <div class="row"> <div class="col-md-6 mb-4 mb-md-0">  <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>  </div> <div class="col-md-6 text-md-right"> <ul class="list-inline mb-0">  <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>  </ul> </div> </div>  <div style="text-align: center;"> <div >© ISSUHUB. 2024. All rights reserved.</div> </div>  </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>