Style creation rules

If you are going to write quite a voluminous CSS-file, you should follow some general recommendations, which can help to avoid mistakes and to make the code understandable and convenient.

Write all the rules for every selector in the same place

It is allowed for very selector to add every style parameter and its meaning apart, as it is shown in the example 18.1.

Example 18.1

1
2
3
TD { background: olive; }
TD { color: white; }
TD { border: 1px solid black; }

But, such a note is not very convenient. It is necessary to repeat one and the same selector for several times and it is quite easy to become confused in their amount. That’s why, write the arguments for every selector together. In this case, the list of notes mentioned will get the following view (example 18.2).

Example 18.2

1
2
3
4
5
TD {
  background: olive;
  color: white;
  border: 1px solid black;
}

The form of writing – in one or in several lines – depends on the author’s desire. Let’s admit that every parameter takes a separate line, it is easier to find the necessary meaning with the help of a glance. Correspondingly, the CSS-code editing goes more convenient and faster.

Has the priority meaning, indicated in the code below

If in the beginning there is a parameter with one meaning, which sets for the selector, and later the same parameter, but already with another meaning, then there will be applied the meaning, which was set lower in the code (example 18.3).

Example 18.3

1
2
P { color: green; }
P { color: red; }

In the given example for the selector P, the color of the text first sets as green and later – red. As the meaning RED is located lower, than finally it will be applied to the parameter COLOR.

Indeed, it would be better to avoid such a note and delete the repeating selector parameters. But the same may occur not evidently, for example, in the case of connection of the different style files, which consist the same selectors.

Begin with the selectors of the top level

Taking into consideration, that a lot of style qualities of the elements are inherited from their parents, it is better to begin the style sheet with the selectors, which are the containers for other elements. Particularly, these are BODY, TABLE, UL, OL and others. If it is necessary to set the typeface of the script for the whole text of the web-page, then it is necessary to apply the parameter FONT-FAMILY to the selector BODY, like it is shown in the example 18.4.

The example 18.4

1
2
3
4
BODY {
  font-family: "Times New Roman", Times, serif; /* Script typeface */
  font-size: 110%; /* Script size */
}

The inheritance of the qualities allows not repeat for several times one and the same parameters, if they were set for the selectors of the top level. But, not all the attributes are inherited and to some of them, like BORDER it is necessary to treat several times.

Group the selectors with the same parameters and meanings

The priority and convenience of grouping consist of the appliance of set of parameters to several selectors at the same time. So, in the example 18.5 it is shown the addition of the similar attributes for three different identifiers. But as they need different background color, it should be set below.

Example 18.5

1
2
3
4
5
6
7
8
9
10
11
#col1, #col2, #col3 {
  font-family: Arial, Verdana, sans-serif; /* Script typeface */
  font-size: 90%; /* Script size */
  font-weight: bold; /* Normal script */
  color: white; /* Text color */
}
 
/* Background color for every layer */
#col1 { background: #ebe0c5; }
#col2 { background: #bbe1c4; }
#col3 { background: #add0d9; }

Use the identifiers and classes

Classes and identifiers are convenient to use, when it is necessary to apply one style to different elements of the web-page: to the cells of tables, links, passages and so on. If the tag in front of the class name is not set, it can add to any tag (example 18.6).

Example 18.6

1
2
3
4
5
6
7
.new {
  ... /* This style can be used with any tags */
}
 
P.new {
  ... /* This style works only for the tag <P> */
}

Class NEW in the given example is one, but the style defines for the different elements, that is why they differ.

Apply the universal style parameters

Universal parameters at the same time set several meanings. The examples of such qualities: border (the view of the border), padding (fields around the element), margin (indents around the element).

So, the parameter PADDING defines the fields simultaneously for the whole 4 sides of the element. That’s why the use of PADDING: 10px is shorter and more understandable than the consecutive adding of the arguments PADDING-LEFT, PADDING-TOP, PADDING-RIGHT and PADDING-BOTTOM, defining the fields for every side. Through PADDING it is also possible to set different meanings at the top, at the right, at the left and at the bottom. In the example 18.7 the use of the universal style attribute MARGIN is shown.

Example 18.7

1
2
3
4
5
6
7
8
9
P {
  margin-top: 10px;
  margin-right: 30px;
  margin-bottom: 5px;
  margin-left: 0;
}
P {
  margin:  10px 30px 5px 0;
}

In the given example were listed two notes, which give the same result, but the note with MARGIN looks more shorter and demonstrable.