Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Write Style Rules to Make Them Understandable

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

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

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.

Show 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

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

  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.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268