HTML and CSS Reference
In-Depth Information
other way, using CSS, that we could target a single list item in an HTML list that has more
than one list item.
Cleaning Things Up
Now that we've corrected the look of the text in the navigation, let's see what else we can
improve. The text in the promo area that overlays the big promo photo needs to be aligned
differently, so let's fix that by adding to the existing styles in our
.promo-desc
declaration
block:
.promo-desc {
position: absolute;
bottom: 93px;
right: 75px;
width: 316px;
text-align: center;
}
Here we've added the
text-align
property with a value of
center
. This property can
take a value of
left
,
right
,
center
, or
justify
. Using
center
here, not only is the
text centered, but this also centers the button that appears below the text. As we learned earli-
er in the topic, the button (which is an
<a>
element in the HTML) is an inline element con-
verted to an inline-block element, thus it's subject to typographic styles. If this were a block-
level element such as
<div>
or
<p>
, and were not converted to inline-block, it would not
center, because block-level elements are not in text flow and, as a result, are not subject to
typographic styles.
We would also like to set the correct color for the various headings on the page. Most of these
have the same color, so what we'll do is expand on the grouped selector rule set we defined a
little earlier:
h1, h2, nav {
font-family: ChelseaMarket, Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: normal;
color: #810430;
}
