ID:120231
 
Keywords: css, tutorial
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.
This, actually rather helped me. It doesn't sound like it would be the most helpful thing in the world, but laying out work like this, as I just did for a test project, ended up being ridiculously easy to manage and edit. Thank you.
No problem :).
For some reason I just can't seem to get a custom CSS working. I've tried everything and the only thing I can modify is the font family. Can't even change my sites background color -_-
Hmm well then your doing something wrong, for the site background just put body {background: #(some hexidecimal number);}.
Yeah I got it figured out last night, but do you think you can help me with one thing? If you look at my site, the post titles and blog comment names are black and are hardly visible. How would I make it white? I tried everything and I couldn't figure it out. Also, any way to push posts down a bit so my header isn't blocked?
For the title color try
.post .title{
color: #ffffff
}
should work.
and the box is the center so use
.center, #center{
margin-top: 50px
}
then just edit the 50 for the right position, make sure you don't have a duplicate of either definition because the first will be taken as the proper definition and cancel the other out.
Sweet thanks, worked like a charm:) Do you know how to also change the color for the name of the people who comment in blog comments and make the font size for the names and comments a little bigger?
Not to sure about that a specifically but try this.
#comment_box .comment_header{
color: #(the hex you want)
}
may or may not work.