Basic syntax

The way of writing CSS differs from the form of the use of HTML tags and in the overview it has the following syntax.

Selector { property1: value; property2: value; ... }

Selector is the name of the style, in which formatting parameters are indicated.  Selectors can be of several types: tag selectors, identifiers and classes. The necessary style property is written in braces, and its value is indicated after colons. Parameters are separated from each other with semicolon.

CSS is not sensitive to the case, line folding, spaces and tabs, that is why notation depends on the willingness of the developer. So, two ways of selectors’ design and their rules are shown in the example 4.1.

Example 4.1. The use of styles.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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>Use of styles</title>
  <style type="text/css">
   h1 { color: #a6780a; font-weight: normal; } 
   H2 { 
    color: olive; 
    border-bottom: 2px solid black;
   }
  </style>
 </head>
 <body>
 
  <h1>Title 1</h1>
  <h2>Title 2</h2>
 
 </body>
</html>

In this example the characteristics of the selector H1are written in line, and for the selector H2 every parameter is located on the separate line. In the second case it is easier to find the parameters and to edit them if it is necessary, but the data volume will increase a little bit at the expense of the active use of spaces and line folding.

Note
Selectors’ names must begin with Latin symbol (a-z,A-Z) and can contain numerals, for example – terminator4, Titanic2, extra.

The changing of the importance of the elements with the help of !important.
The authors of the site and its visitors can use their own style sheet. The authors add styles to control the view of elements and layout of the web pages, and the users do it to change some parameters, for example, font size, colour of the titles.
Syntax of the use of !important:

Selector { property: value !important }

The key-word !important is written with a space after the volume of the style attribute.
Browser uses the next algorithm when enabling the user’s style sheet or simultaneous use of different styles of the author and the user to one and the same selector:
1. !important is added to the author style – the author style will be used.
2. !important is added to the user style – the user style will be used.
3. !important is absent in both the author style and the user style - the author style will be used.
4. !important is in the author style and the user style – the user style will be applied.
The result of use of!important depends on its location and is shown in the table 4.1.

Table 1. The application result of !important.

Author style User style Result
BODY {
/* Grey text, great importance */
color: silver !important;

/* Text size is 8, great importance */
font-size: 8pt !important
}

BODY {
/* Black text */
color: #000;

/* Text size is 12 */
font-size: 12pt
}

Lorem ipsum dolor sit amet...

All parameters of the author will be used. The text becomes grey, the size of items equals 8 points.

BODY {
/* Grey text */
color: silver;

/* Text size is 8 */
font-size: 8pt ;
}

BODY {
/* Black text, great importance*/
color: #000 !important;

/* Text size is 12 */
font-size: 12pt
}

Lorem ipsum dolor sit amet...

All parameters of the user will be used. The text is black, the size is 12 points.

BODY {
/* Grey text */
color: silver;

/* Text size is 8 */
font-size: 8pt
}

BODY {
/* Black text, great importance */
color: #000 !important;

/* Text size is 12, great importance */
font-size: 12pt !important
}

Lorem ipsum dolor sit amet...

All user parameters will be used. The text is black and its size is 12 points.

BODY {
/* Grey text, great  importance */
color: silver !important;

/* Text size equals 8 points */
font-size: 8pt;
}

BODY {
/* Black text */
color: #000;

/* Text size equals 12 points */
font-size: 12pt
}

The author style will be used: grey colour of the text, the font size equals 8 points.
BODY {
/* Grey text, great importance */
color: silver !important;

/* Text size equals 8 points, great importance */
font-size: 8pt !important;
}

BODY {
/* Black text, great importance*/
color: #000 !important;

/* Text size equals 12 points, great importance */
font-size: 12pt !important
}

Lorem ipsum dolor sit amet...

When adding !important to both tables, the user style has a priority.

The mechanism of enabling the user style is realized in different browsers differently. For example, in Internet Explorer you should select the option Service>Browser properties.., than in the paste General press the key Design and define the way to the local file (figure 4.1).

Figure 4.1. Selection of the user style in Internet Explorer.

In Firefox browser the running of the user’s styles is placed on the special extension of the Web Developer. With the help of its convenient instrument tools it is possible to set the user’s file with a style through the point CSS>Add User Style Sheet… (fig.4.2).

Figure 4.2. Selection of the user style in the document in Firefox.

Note

In CSS1, when !important is simultaneously used by the author and by the user, the author’s style has an advantage. In CSS2 it is vice versa and not the user’s style is applied, as it is shown in table 4.1.

Example 4.2. Increasing of the elements’ importance.

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>Importance of the elements</title>
  <style type="text/css">
   BODY {
    font-family: Georgia, Times New Roman, Times, serif; /* script’s family */
    font-size: 90%; /* Font size */
    color: yellow !important; /* Colour of the text */
    background: navy !important; /* Colour of the font*/
   }
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

The colour of the text and background is set for the whole web-page with the help of styles.

Note

It should be noted, that users quite rarely enable their own style files, as browsers have the inbuilt support as for the change of script size. As a rule, the other possibilities are not usually put on the user’s files with styles.