90 lines
4.8 KiB
HTML
90 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>FAQs</title>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
#wrapper { margin: auto; width: 80%; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="wrapper">
|
|
<h1 id="top">Frequently Asked Questions</h1>
|
|
<ul>
|
|
<li><a href="#faq0">Why doesn't the heading tag go in the head section?</a></li>
|
|
<li><a href="#faq1">Why does the text in my web page wrap differently than the examples?</a></li>
|
|
<li><a href="#faq2">How can I create web pages that look exactly the same on all browsers?</a></li>
|
|
<li><a href="#faq3">How do I know when to use an id, a class, or a descendant selector?</a></li>
|
|
<li><a href="#faq4">My CSS doesn't work. What can I do?</a></li>
|
|
</ul>
|
|
|
|
<h2 id="faq0">Why doesn't the heading tag go in the head section?</h2>
|
|
<p>It's common for students to try to code the heading tags in the head section of the document, but someone doing this won't be happy with the way the browser displays the web page. Even though "heading tag" and "head section" sound similar, always code heading tags in the body section of the web page document.</p>
|
|
<a href="#top">Back to Top</a>
|
|
<h2 id="faq1">Why does the text in my web page wrap differently than the examples?</h2>
|
|
<p>The text may wrap a little differently because your screen resolution or browser viewport size may not be the same as those on the computer used for the screen captures. That's part of the nature of working with the Web—expect your web pages to look slightly different in the multitude of screen resolutions, browser viewport sizes, and devices that people will use to view your designs.</p>
|
|
<a href="#top">Back to Top</a>
|
|
<h2 id="faq2">How can I create web pages that look exactly the same on all browsers?</h2>
|
|
<p>You can't.Design with the most popular browsers and screen resolutions in mind, but expect your web pages to look slightly different when displayed by different browsers and on monitors with different screen resolutions. Expect web pages to look even more different when displayed on mobile devices. You'll learn about responsive web design techniques later in this chapter.</p>
|
|
<a href="#top">Back to Top</a>
|
|
<h2 id="faq3">How do I know when to use an id, a class, or a descendant selector?</h2>
|
|
<p>The most efficient way to configure CSS is to use HTML elements as selectors. However, sometimes you need to be more specific—that's when other types of selectors are useful. Create a class when you need to configure one or more specific objects on a web page in the same way. A class can be applied more than once per web page. An id is similar to a class, but be mindful that it is not valid to apply an id more than once on a web page. To repeat: an id can be used once and only once on each web page. Use an id for a unique item, such as the navigation hyperlink that indicates the current page. As you become more comfortable with CSS, you'll begin to see the power and efficiency of descendant selectors, which allow you to target elements within a specific context (such as all paragraphs in the footer area) without the need to code additional classes or ids within the HTML code.</p>
|
|
<a href="#top">Back to Top</a>
|
|
<h2 id="faq4">My CSS doesn't work. What can I do?</h2>
|
|
<p>Coding CSS is a detail–oriented process. There are several common errors that can cause the browser not to apply CSS correctly to a web page. With a careful review of your code
|
|
and the following tips, you should get your CSS working:</p>
|
|
<ul>
|
|
<li>Verify that you are using the colon ":" and semicolon ";" symbols in the right spots—they are easy to confuse. The : symbol should separate the properties from their values. The ; symbol should be placed between each property : value configuration.</li>
|
|
<li>Check that you are not using = signs instead of : between each property and its value.</li>
|
|
<li>Verify that the { and } symbols are properly placed around the style rules for each selector.</li>
|
|
<li>Check the syntax of your selectors, their properties, and property values for correct usage.</li>
|
|
<li>If part of your CSS works and part doesn't, read through the CSS and check to determine the first rule that is not applied. Often the error is in the rule above the rule that is not applied.</li>
|
|
<li>Use the W3C's CSS validator at <a href="http://jigsaw.w3.org/css-validator">http://jigsaw.w3.org/css-validator </a> to help you find syntax errors.</li>
|
|
</ul>
|
|
|
|
<a href="#top">Back to Top</a>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<a href="#top">Back to Top</a>
|
|
</div>
|
|
</body>
|
|
</html>
|