HTML and CSS Reference
In-Depth Information
These rules apply to all paragraphs, but you can create a class or use a descendant selector to apply a
different amount of indentation to paragraphs in a particular section of a page.
Using Negative Margins
CSS permits negative values for margins. This means that you can reduce the gap between elements, or move
an element further to the left—the opposite of indenting. When using negative margins, you need to be careful,
because doing so could result in elements overlapping or being hidden offscreen.
■
in the days before widespread support for web fonts, a common technique known as
image replacement
used negative margins and other CSS tricks to hide text offscreen. The idea was to provide alternative content
for search engines and screen readers for the blind when text was embedded in an image. google's guidelines
specifically warn that using CSS to hide text can “cause your site to be perceived as untrustworthy since it presents
information to search engines differently than to visitors.” (
http://support.google.com/webmasters/bin/
Caution
exerCise: styling a page with margins
in this exercise, you'll create some basic styles to restrict the width of a page, center its content, and indent
the paragraphs using techniques described in the previous sections. You'll also make use of text properties
from
Chapter 4
. Use destinations.html in the ch06/begin folder as your starting point.
1.
Create a blank file and save it as destinations.css.
2. Attach destinations.css to destinations.html by adding a
<link>
tag in the
<head>
of
the page like this:
<title>Mediterranean Destinations</title>
<link href="destinations.css" rel="stylesheet">
</head>
3. Create a style rule for the
<body>
to remove the default margin and padding. Also,
specify the
font-family
property like this:
body {
margin: 0;
padding: 0;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
4. The content is in a
<div>
with the id
wrapper
. Create an id selector to center the
<div>
and fill the full width of the screen on small devices, but not exceed
650px
.
#wrapper {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
