Windows Hosting Blog – Seekdotnet.com Blog about Windows Hosting and ASP.NET Hosting
In the beginning of website booming, we all depend a lot on professional developers and programmers to make the website, fix the website and many more. But now it`s depend on you, whether you are just a beginner in coding area, with CSS you can independently change your own website. Thanks to CSS`s flexibility and styles that easier to understand by the beginner.
No matter if you want to build a new website based on CSS or make a little change on your blog, it is always safe to know the basic rules to make it easier. Let`s take a look to 10 useful CSS tips for beginners.
Use Reset.Css
When you are about to rendering CSS styles, you have to start with new stylesheets to reset all fundamental styles. It is because different browsers have different ways of handling them. You can use these commonly used reset.css frameworks; Yahoo Reser CSS (http://developer.yahoo.com/yui/reset/) , Eric Meyer`s CSS Reset (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) and Tripoli (http://devkick.com/lab/tripoli/)
Use Shorthand CSS
Shorthand CSS will give you shorter way to write your own CSS codes and it also makes the code cleaner and easier to understand. For example instead of creating CSS like this
.header {
background-color: #fff;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: top right;
}
It can be shortedlike the following:
.header {
background: #fff url(image.jpg) no-repeat top right
}
Class and ID
Understanding the different of these two selectors often confuse beginners; class is represented by dot (.) while id is represent by hash (#). In a nutshell, class can be re-use for many times while id is unique and can`t be use again and again.
Power Of <Li>
<li> or link list is a very useful navigation menu when it used correctly with <ol> or <ul>
Keep your CSS Codes Clean
As beginner, when you have messy CSS codes, you are definitely will end up having confusion and hard time to refer the previous code.
CSS Debugging Tools
As you work alone, it is always nice to be able to get preview of your layout while working with its CSS because it helps understanding and debugging CSS styles. You can install one of these free CSS debugging tools; FireFox Web Developer (http://chrispederick.com/work/web-developer/) , Internet Explorer Developer Toolbar (http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en) , DOM Inspector (https://addons.mozilla.org/en-US/firefox/addon/1806) and Firebug (http://getfirebug.com/).
Ask Free CSS Editors
When you need more help, you can always get help from free CSS editors which is better than plain notepad. Here what we suggest for you; Simple CSS, Notepad ++, and A Style CSS Editor.
