#1 in my series of CSS tutorials- Organisation. in Off Topic
|
|
This will probably be a short tutorial but after seeing how some people have their CSS code laid out I had to make this my first tutorial.
#1- Organisation.
Okay before you even touch your CSS code you need to have a logical idea of what you want the finished product to look like, this means either think it through and store this information in your brain or draw it out(on paper or paint I don't care). After you have finished this task(which has just made your life a whole lot easier) you need to try and make a list of as many of the separate div/box names as you can. like so:
-body
-page(probably wont be used)
-#blog_comments_box
-#comments_box
-#guild_box
etc...
Now make a clean notepad file and give it an appropriate name, this means if there is a problem with your browser you still have the code saved. We will now make use of a very simple but very effective tool, notes. To create a note in a css file just do this:
/*"note name"*/(don't include the quote marks in the name)
This tool allows you to separate you work logically and in a tidy fashion. This way if you need to edit or get someone else to you/they don't just see a mess of code, which can be quite frightening .
Now, enter your blank notepad and make a list of note headings as titles, these should be names of divs/boxes, like so:
/*body*/
/*blog_comments_box*/
/*comments_box*/
/*guild_box*/
and so on.
Now you can just insert information into these sections, like so:
/*body*/
body{
background: #ffffff;
color: #000000;
}
/*blog_comments_box*/
#blog_comments_box{
background: #850502;
color: #028392;
}
/*comments_box*/
#comments_box{
background: #203992;
color: #172836;
}
/*guild_box*/
#guild_box{
background: #202859;
color: #057382;
}
See, very neat and if you need to edit it just find the correct heading and your away. Another side note you should always set your code out like this:
#guild_box{ (with names of div here)
background: #202859; (info here)
color: #057382;
} (and closing bracket all on it's lonesome)
Not for any technical reason, just that it makes your life easier, you can just press enter after the last line of info and add more info :).
Hope this helped a lot of you, I know I'm not the best at explaining things so I tried to keep it simple. Not such a short tutorial... stay on the look out for more tutorials from me, I may do say 1 a week.
Thanks.
|