Classes

The classes are used to define the style for the individual element of the web page or to determine different styles for the one tag. Syntax for the classes will be the following:

Tag.Name of class { property1: value; property2: value; ... }

Inside of the style sheet the desirable tag is written first, than, after the semicolon – the user’s class name. In order to define in HTML code the fact, that tag with the definite style is used, parameter is added to the tag (example 6.1).

Example 6.1. Use of classes with tags.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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>Classes</title>
  <style type="text/css">
   P { /* Simple paragraph */ 
    text-align: justify; /* Text aligning as for the width */
   } 
   P.cite { /* paragraph with a class cite */
    text-align: justify; /* Text aligning as for the width */
    color: navy; /* blue color of the text */
    font-style: italic; /* Italic tracing */
   } 
  </style>
 </head> 
 <body>
 
   <p> while working on the computer it is necessary to sit so, that hands with forearms form the right angle, eyes set on the distance of 30-40 sm from the working surface of the display. You should type using finger-pads in short abrupt strokes.</p>
 
   <p class="cite"> utmost allowed length of nails for women is 12-15 mm, for men – 3-5 mm. If the length of nails transcends that one, regulated by the GOST, the operator can work on the computer only in verhonkah.</p>
 
 </body>
</html>

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

Figure 6.1. Appearance of the text, which is designed with styles.

The first passage is aligned as for the width of the text in black color and the following one – to which the class cite is applied – was written in italic (blue color).

Class names are chosen at will and it is very important for them being understood and followed, meanwhile, the name  should begin with the symbol. You may also use the classes without indicating the tag.  In this case the syntax will be the following:

.Name of class { property1: value; property2: value; ... }

The class with such syntax can be applied to any tag (example 6.2).

Example 6.2. The use of classes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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">
   .cite { 
    color: navy; /* text of the blue color */
    font-style: italic; /* Italic style */
   }
  </style>
 </head> 
 <body>
 
  <p>You should thoroughly take care of your work place. The lightening in the room should be regulated in such a way, that the source of the light is located aside or behind the operator. In order to avoid medical complications  
  <b class="cite">the chair is recommended to choose with upholstered seat </b>.</p>
 
 </body>
</html>

The result of selector’s use with the name cite for the tag <B> is shown in the figure 6.2.

Figure 6.2. The appearance of the tag <B>, which is designed with the help of styles.

It is convenient to use classes, when the style must be applied to several tags of the web-page: cells of the table, links, paragraphs, etc. Tags <SPAN> and <DIV> are used for changing separate words or even letters, and blocks, which include different elements.

Example 6.3. The use of classes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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">
   .inicial { 
    color: red; /* Red colour of the text */
    font-size: 200%; /* Size of the text */
   }
  </style>
 </head> 
 <body>
 
   <p><span class="inicial">T</span>ype. You should type using finger-pads in short abrupt strokes.</p>
 
 </body>
</html>

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

Figure 6.3. The result of classes’ use.