HTML and CSS Reference
In-Depth Information
Type Selector
When you added a background color to the
<body>
element, you used a type selector to do that. A
type selector
is
the name of an HTML element. A type selector can be used as follows:
1.
In styles.css, add the following rule set:
h1 {
font-weight: bold;
}
2.
Save styles.css.
Here, you select the
<h1>
element—a type selector. This declaration makes the
<h1>
bold. Changing the font style
is covered in more detail in Chapter 11.
Unless otherwise specified, add new rule sets below others you've already added.
ID and Class Selectors
IDs and classes, which are attributes of an HTML element, allow you to be more specific when styling elements.
As you saw in the project files, some elements already have IDs and class attributes. The main content area, for ex-
ample, is a
<div>
with an ID of
main
and class of
group
:
<div id=”main” class=”group”>
If you use a type selector for this element to make its background color white, for example, you add the following to
the CSS:
div {
background-color: white;
}
The problem here is that although the main content area is now white, so too is every other
<div>
on the page. By
using an ID selector instead, you can select just that particular
<div>
.
Go ahead and change the main content area's background color to white:
1.
In styles.css, add the following:
#main {
background-color: white;
}
2.
Save styles.css.
