Saturday, August 21, 2010

CSS tips and tricks - Must go through

We all know that cascading style sheets (CSS) are determines the look and format of a web page. Though there are many facilities in using the CSS, still we face some problems in some application of it. That is the reason we can find in the internet – designers and developers are providing so many CSS tips and tricks.
Now the question is why writing this article? Am I going to give you some new CSS tips and tricks? No, I am not going to stuff internet with some same CSS tips and tricks as if presenting new wine in an old bottle! So here is for you some must go through CSS tips and tricks that come in consideration while using CSS effectively and successfully.

  • In particular cases inline elements have to be started in new line like block elements or vise-versa, in controlling height and width of inline elements and spreading background color to match text of block elements without specifying width. Here applies ‘display inline’ or ‘display block’ codes.
  • In IE 6 browser sometimes rendering problem comes in setting width of any element against border and padding has already provided. It is known as box model hack alternative. To solve this problem a code comes in great use and that is "padding: 2em; border: 1em solid green; width: 20em;width/**/:/**/ 14em;".
  • Sometimes we face problem in making web pages cross browser compatible. It is because different browsers have different CSS properties. So it is not possible to code for individual browsers. Here one of best CSS tips and tricks is CSS reset that makes pages compatible to all browsers.
  • Many a times 3D buttons are in needed to match the layout of web pages. But we can not go for expensive 3D development. We can easily get this effect with a code like the one given below. We will see that a button will be created with raised 3 dimensional effects. The is like " div#button {background: #888; border: 1px solid; border-color: #999 #777 #777 #999 }"
  • When CSS code is not working properly up to your expectations and you want you debug it but can not decide how much space it has occupied in the html code the following code comes in help. But remember a careful handling of the extra pixel in the border is needed otherwise situation will remain the same. "element {border:1px solid red}".
  • I have got immense help when finding CSS tips and tricks for removing vertical scrollbar in IE browser. My code was not befitting and the page was looking odd with the scrollbar I used the code below and got the solution. "text area { overflow: auto; }"


There are so many CSS tips and tricks available online to resolve you problems in the use of the CSS. But I only mentioned the few of them. When people hire a freelance graphic designer or hire website designer for website development they do not know the things really. But I have faced this situation many a times and the available CSS tips and tricks have helped me a lot. But with my research on the internet I have solved many problems that are common like the above ones. So you need not to care a lot about the situations. There are lots of CSS tips and tricks available. You just need to see which are of your use. Find the solution and customize the code in your way.

2 comments:

Pamela said...

CSS is the ultimate thing in web design. If you can design a good CSS then u almost completed the work. The rest is just like a formality.

Web design Sydney said...

Very informative tutorial on web design.
Thanks for sharing.