CSS tips for beginners

June 15, 2009
Categories: Web Design

Hello Everyone,
After a long delay I finally found some time to write a new post. This time about CSS. I believe may people will find these tips useful, not only the beginners but also some experiences programmers since there is no limit to perfection :)
1. Use global resets
Global reset is used for more or less similar website rendering in the different browsers. Different browsers have different default values for various elements. Global resets help you fight with these issues.
2. Differentiate id and class in elements
Id attribute specifies that this element is all alone – unique, for example there is only one header on a website. Class however describes a few elements with similar style and preferences.
3. Use short preferences
Using short preferences values is very convenient. Doing so will also reduce you CSS file size.
4. Organize your CSS files
A good alternative to dividing files is better commenting inside the actual files. It makes your code easier to read and edit.
5. Use CSS frameworks and toolboxes
Doing so will help you save time. You can use the existing framewfork or edit it to make it wok better with your project.
6. Avoid redundancy
You all know that tags td (tbody/thead/tr) is only allowed within the table tag. The same goes for li and ui. So instead of:
table td { … }   ul li { … }
you can write:
td { … }   li { … }
This is a very easy case, but I think you got the idea.
7. Don’t overuse !important
This flag raises the priority of the described preference, so if you have a contradiction down below the preference with !important will be prioritized. Some beginners like to abuse !important but remember you can always replace it with stricter inheritance.
8. Differentiate media types
Media types with connected CSS files allow you to correct website rendering on different platforms (monitor, cellphone, printer). Using media types is cross-referenced with using different files, using these will make your website more accessible.
9. Specify multiple fonts
Every time you specify fonts make sure to specify more then one since different platforms use different fonts.
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
BTW most of the professional CSS editors have built in font collections. Enough of notepad programming already :)
10. Use tools to check CSS in the browser. it will make your work easier and faster.
I hope everyone found the article useful. I hope it will make your coding better (at least a little)
Please feel free to add more points in the comments!
Hello Everyone,
css

css

After a long delay I finally found some time to write a new post. This time about CSS. I believe may people will find these tips useful, not only the beginners but also some experiences programmers since there is no limit to perfection :) 1. Use global resets Global reset is used for more or less similar website rendering in the different browsers. Different browsers have different default values for various elements. Global resets help you fight with these issues. 2. Differentiate id and class in elements Id attribute specifies that this element is all alone – unique, for example there is only one header on a website. Class however describes a few elements with similar style and preferences. 3. Use short preferences Using short preferences values is very convenient. Doing so will also reduce you CSS file size. 4. Organize your CSS files A good alternative to dividing files is better commenting inside the actual files. It makes your code easier to read and edit. 5. Use CSS frameworks and toolboxes Doing so will help you save time. You can use the existing framewfork or edit it to make it wok better with your project. 6. Avoid redundancy You all know that tags td (tbody/thead/tr) is only allowed within the table tag. The same goes for li and ui. So instead of: table td { … }   ul li { … } you can write: td { … }   li { … } This is a very easy case, but I think you got the idea. 7. Don’t overuse !important This flag raises the priority of the described preference, so if you have a contradiction down below the preference with !important will be prioritized. Some beginners like to abuse !important but remember you can always replace it with stricter inheritance. 8. Differentiate media types Media types with connected CSS files allow you to correct website rendering on different platforms (monitor, cellphone, printer). Using media types is cross-referenced with using different files, using these will make your website more accessible. 9. Specify multiple fonts Every time you specify fonts make sure to specify more then one since different platforms use different fonts. font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; BTW most of the professional CSS editors have built in font collections. Enough of notepad programming already :) 10. Use tools to check CSS in the browser. it will make your work easier and faster. I hope everyone found the article useful. I hope it will make your coding better (at least a little) Please feel free to add more points in the comments!

Comments

Contact Us