The "id" Attribute
The "id" attribute assigns a unique identifier to an element. As web sites evolve and become increasingly sophisticated, the "id" attribute is used in many ways:
- As a style sheet selector.
- As a target anchor for hypertext links.
- To reference specific elements for scripting purposes.
- As the name of a declared OBJECT element.
- For web page processing (identifying fields in an interactive form, extracting HTML documents into other formats, database functions, etc.).
For the purposes of learning CSS, we'll concentrate solely on the use of "id" attributes as style sheet selectors.
The "id" attribute in CSS simply identifies a specific and unique element for you to apply a CSS rule.
The attribute name you use must be unique to a specific element (name can only be used once per web page).
When you create a style name to apply to an "id"-named attribute, you must begin the name of the style with the hash character (#).
<head>
<title>Example of id attribute</title>
A <link href="stylesheet.css" rel="stylesheet" type="text/css">
<style type="text/css">
B #primary-navbar { width: 200px; }
C #primary-navbar li { font-family: verdana, sans-serif; }
D #primary-navbar a { decoration: none; }
E #primary-navbar a:hover { decoration: underline; }
</style>
</head>
<body>
F <div id="primary-navbar">
<ul>
<li><a href="about.html">About the Department</a></li>
<li><a href="programs.html">Programs and Courses</a></li>
<li><a href="faculty.html">Faculty and Staff</a></li>
<li><a href="news.html">News and Events</a></li>
</ul>
</div>
For this example we have:
- Linked our main stylesheet
- Declared the element with id="primary-navbar" to be 200 pixels wide
- Declared list items within id="primary-navbar" to use Verdana font
- Declared anchors (links) within id="primary-navbar" to use no underline
- Declared link hover property within id="primary-navbar" to use underlines
- Identified the element on our page named "primary-navbar" by putting it inside a <div> tag with the attribute id="primary-navbar"
Note that in this example, the style declarations for "primary-navbar" are defined within the document and not in the main stylesheet.css file. These styles would only be available to use on this page. For styles that will be used on multiple pages, save them in your central style sheet file.
|
