In order to do your homework this week, you will need to review CSS IDs. You should already be familiar with the basic concepts, but here is a very brief refresher just in case your memory is rusty. I will also expound on the differences between IDs and classes. Also, we will use IDs to label various parts of documents to specify a set of CSS rules unique to each part of the document.
IDs
ID selectors are similar to class selectors. They can be used to select any element that has an ID attribute. Here is an example of the syntax for ID selectors, and elements using the IDs in the markup:
Example Style sheet
#special { color: red; } /* this is an id */
#verySpecial { color: green; } /* this is an id */
.specialToo { color: orange; } /* this is a class */
- In the style sheet, ID names begin with a hash mark (#)
- ID names are case-dependent.
- ID names must conform to
XHTML naming conventions
.
Example Markup
<p id="verySpecial">
This is a paragraph that uses the "verySpecial" ID.
</p>
- Note that the hash mark (#) is omitted in the markup!
- The ID name used in the markup must match exactly (including case) with the ID name specified in the style sheet.
Rendered Example
This is a paragraph that uses the "verySpecial" ID.
This example attaches the "special" ID to an H1 tag, and the "verySpecial" ID to a P tag.
Contextual ID Selectors
Similar to classes, IDs can be used in contextual selectors to target specific elements in the document. Like classes, there are two different ways to use contextual class selectors. The general syntax for the two are:
element#IDname |
targets an element that has been assigned the ID "IDname" |
#IDname element |
targets an element that is a descendant of any element that has been assigned the ID of "IDname" |
Here is an example of the contextual ID selectors in use.
In this example, anything enclosed by the "example" DIV will be rendered in 'comic sans' font. Any H4 tag that is a descendant of the element with the example ID is red and centered. Also, the P tag that is assigned the "highlight" ID is colored blue.
Example Style Sheet
div#example {
font-family: 'comic sans', 'comic sans ms', cursive;
}
#example h4 {
color: red;
text-align: center;
}
p#highlight {
color: blue;
font-weight: bold;
}Example Markup
<h4>Normal Heading Outside the "example" DIV</h4>
<div id="example">
<h4>Heading Under "example" DIV</h4>
<p>
This paragraph is a descendant of the "example"
DIV, so its font is 'comic sans'.
</p>
<p id="highlight">
This paragraph has the "highlight" ID attached to
it, so it is blue (as well as being rendered in 'comic sans').
</p>
<p>
This paragraph is a descendant of the "example" DIV,
so its font is 'comic sans'.
</p>
</div><!-- example DIV -->Rendered Example
Normal Heading Outside the "example" DIV
Heading Under "example" DIV
This paragraph is a descendant of the "example" DIV, so its font is 'comic sans'.
This paragraph has the "highlight" ID attached to it, so it is blue (as well as being rendered in 'comic sans').
This paragraph is a descendant of the "example" DIV, so its font is 'comic sans'.
IDs vs Classes
As you have seen, IDs are very simliar to classes. They both can be used to select any element independent of the document hierarchy. Designers new to CSS often are unclear as to when to use a class attribute vs. when to use an ID attribute. This discussion should help clarify the distinctions between IDs and classes.
Guidelines for Using IDs
The information below provides guidelines on recommended uses of IDs. They provide criteria for determining whether an ID is appropriate, and how to use IDs most effectively.
-
IDs are used to target unique areas in the document for CSS.
- IDs are generally used to identify unique parts of the document structure, such as the main content, navigation, sidebars, header and footer.
- This allows you to specify a set of CSS rules, unique to each part of the document.
- Each of the document parts are separated by DIV elements, with unique ID labels for each part of the document.
- View an example style sheet with its example markup that divides a document into several functional parts, and the resultant browser display.
- ID names must be unique!
- An ID name can only be attached to one element in a document!
- You can place multiple IDs in a page, but each ID must have a unique name to identify it.
-
Remember, ID names are case-dependent and must conform to XHTML
naming conventions.
-
When considering cascading and inheritance, IDs carry more weight than do
classes...they take precedence over classes.
- We will discuss this in greater depth next week
-
IDs can be accessed in the DOM by JavaScript.
- IDs are used to identify DOM nodes on which JavaScript can perform a function.
Contrast these guidelines with the previous page's usage guidelines for classes. Study the example above that uses DIVs with IDs to style different parts of the document. Using IDs for context in descendent selectors is a fundamental technique in CSS design.