Identifiers

An identifier (which is also called ID selector) defines the unique name of the element, which is used for changing its style or accessing to it via scripts. That allows controlling the element dynamically.

Syntax:

#Name of identifier { property1: value; property2: value; ... }

In contrast to classes identifiers must be unique. It means that they should be mentioned in the document’s code only one time.

Example 7.1. The use of identifier.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Идентификаторы</title>
  <style type="text/css">
   #help { 
    position: absolute; /* Absolute positioning */
    left: 160px; /* The position from the left side */
    top: 50px; /* the position from the top */
    width: 225px; /* Width of the block */
    height: 180px; /* Height of the block */
    background: #f0f0f0; /* Background colour */ 
   }
  </style>
 </head> 
 <body> 
  <div id="help">
   This element helps in the case, when you understand the fact, that you completely don’t understand, who can help you and in what way. Just in this moment we prompt you, that nobody can help you. 
 </body> 
</html>

The result of this example:

Figure 7.1. The result of the identifier’s use.

Identifiers can be applied to concrete tag, in this case the syntax will be the following:

Tag#Identifier’s name { property1: value; property2: value; ... }

Example 7.2. The use of the identifier with the tag.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Identifiers</title>
  <style type="text/css">
   P {
    color: green; /* Gren colour of the text */
    font-style: italic; /* Italic type of the text */
   }
   P#opa { 
    color: red; /* Red colour of the text */
    border: 1px solid #666; /* Border’s parameters */
    background: #eee; /* Background colour */
    padding: 5px; /* Fields around the text */
   }
  </style>
 </head> 
 <body> 
  <p>Common paragraph</p> 
  <p id="opa">Uncommon paragraph</p>
 </body> 
</html>

The result of this example is shown in the figure 7.2.

Figure 7.2. Paragraph after the use of the style.
 
The use of the identifier allows changing of some parameters of the element (example 7.3).
Example 7.3. Changing of visibility of the layer.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Идентификаторы</title>
  <style type="text/css">
   #descr {
    position: relative; /* Relative positioning */
    visibility: hidden; /* Hide the content of the layer */
   }
  </style> 
  <script type="text/javascript">
   function hiddenLayer() {
    document.getElementById("descr").style.visibility = "hidden";
   } 
   function showLayer() {
    document.getElementById("descr").style.visibility = "visible";
   }
  </script>
 </head> 
 <body>
  <table width="90%" border="0" cellspacing="0" cellpadding="4" align="center">
   <tr>
    <td width="20%" align="center"><a href="#" onMouseOver="showLayer()" onMouseOut="hiddenLayer()">
      <img src="button.gif" width="98" height="33" border="0" alt="Key"></a></td>
    <td>
     <div id="descr">The given exclusion is the subset of the abstractional supremative 
      monotonous fedorias of the cadonative extraphazorium.</div>
    </td>
   </tr>
  </table>
 </body>
</html>

The result of this example is shown below. When you point the cursor to the image, the text, which was hidden up to this time, is demonstrated and hides again when you move the cursor away from the image. The change of the element’s style parameters happens through the address to it by the name of the identifier.