If you're 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. For example write all the rules for every selector in the same place.
Welcome to Bucaro TecHelp!

Welcome to 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 Advertise on Bucaro TecHelp Advertise Here RSS News Feeds News Feeds

HTML5 Solutions: Essential Techniques for HTML5 Developers

Essential Techniques for HTML5 Developers

HTML5 brings the biggest changes to HTML in years. Web designers now have new techniques, from displaying video and audio natively in HTML, to creating realtime graphics on a web page without a plugin.

This book provides a collection of solutions to all of the most common HTML5 problems. Every solution contains sample code that is production-ready and can be applied to any project.

Click Here

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

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.



RSS Feed RSS Feed

Web Design Sections

CSS3: Visual QuickStart Guide (5th Edition)

With this book, readers can start with a tour of the stylesheet language, or skip ahead to any chapter of the book to look up specific tasks covering just what they need to know. This task-based, visual reference guide uses step-by-step instructions, and plenty of screenshots to teach beginning and intermediate users CSS.

Reader David Diez of Boston, MA says, "This book's strategy seems to be show an example, give a general explanation, provide a few key but brief tips, move on. The writing is clear and concise. ... I continue to be very pleased and impressed with the book. It's proving to be a helpful reference and everything in it is highly accessible. Click here for more information.


[Site User Agreement] [Advertise on This site] [Search This Site] [Contact Form]
Copyright©2001-2011 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268