Cascading Style Sheets offer many benefits and powerful features for the convenience of web designers. But there are certain issues which we need to be careful about. By following certain tricks, we can make the process of coding a pleasant experience.

In CSS, the styling of fonts is done in the following manner.

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1.2em;
line-height: 1.5em;
font-family: sans-serif, verdana

There is no need of such a lengthy piece of code, when by using CSS font shorthand rule you can write the whole style in a single line.

font: bold italic small-caps 1em/1.5em sans-serif, verdana

However, there is a problem associated with it. This version of CSS shorthand will be able to produce the desired result, if both font-family and font-size are specified. There is another condition. The font-family must be mentioned at the end of the code and the font-size must come just before this. If the command doesn’t contain the font-weight, font-style and font-variant properties, then default ‘normal’ values will be applied. So be careful about these things before using the font shorthand rule.

In common practice, attributes are assigned for just one class. Actually, you can specify as many classes as you wish. For instance:

<p class="text side">…</p>

In the above instance, there are two classes used together. The two classes are separated by a space and not a comma. It denotes that the paragraph calls all the rules applied to both text and side. There are certain rules which will be overlapped between the two classes. In that case, the class which is lower than the other in the CSS document will take precedence.

Web designers write the border rule in a particular order like specification of the color, width and style. For example: border: 3px solid #000. The output of the code will be a black solid border which is 3 pixels thick. But you need not specify three values here. You only require to mention the border style.

It is always recommendable to display text using common HTML language. It is always preferred over an image, as it ensures quick download and helps in easy accessibility. But sometimes, your preferred font is not there on your visitors’ computers. In that case, you will have to make use of an image. You have to specify the Alt text if your image is not displayed on a particular web browser. But search engines do not pay much attention to Alt text as they do to real text. To solve this problem, employ the following code in your CSS document:

h1
{
background: url(css-image.gif) no-repeat;
height: image height
text-indent: -2000px
}

Most of the beginners rapidly resort to absolute positioning as it is pretty straight-forward. However absolute layouts have a number of troubles and the major problem of all is that absolute elements are eliminated from the course. As an alternative you should make use of generally static positioning, margins and floats to maintain the flow of the layout. Static positioning is the default and basically means no positioning at all and the elements just take up space in the normal flow of the document. You can use margins to push elements into position or use floats when you want elements aligned horizontally.

Tags: CSS Tricks for Your Convenience