I want to build a CSS template of my imagination: this means from SCRATCH.
I want to do it like if I'm doing it with a pen, but just with the mouse. I have no idea about this field (css),that's why I'm asking. Many developers had made fantastic templates that rocks.
I want to know how do you create your CSS templates? (if you did) Do you start them from scratch, using a framework, using an application? Is that hard or easy?
Simply how you do it?
I start mine from scratch, just type it using VS or Aptana etc.
I work out the basic layout, for example 3 column.
I then use inline style to create the basic layout, adding the markup and html until I have it how I like it. I then continue this way until I have the basic skeleton of my website.
From here I put the css into an external file and start adding my elements, styling as I go.
Before you know it you'll have something looking sweet, it happens surprisingly fast!
*
{
margin: 0;
padding: 0;
border: 0;
border-collapse: collapse;
}
Cue imagination
Don't re-invent the wheel, find a good established css base and build upon it.
My typical course of action:
Everything and anything you ever wanted to learn about css can be found at a list apart. You might also like css garden. Great, real world examples you can pick apart and hack.
Please pay no attention to the people who know css through and through down voting your question. You have to start somewhere. Some template engines make the end result 'too easy', beginners flock to what works for them in the least amount of time. Good on you for studying more.
Why, oh why did someone vote to close this? Are we now punishing people for not knowing something on a site that is supposed to be the end-all be-all of programming knowledge? If you get drunk on IRC, forget the down arrow. Good grief.
I assume you're going to be re-using this, since you've called it a template, so I'd make sure you organize/group your css elements in a logical way (text, layout, etc). You'll want something you can quickly read and customize later.
Definitely clear default margins and paddings, because different browsers (cough IE) have their own ideas of what margins and paddings various elements should have.
Finally, make use of percentages and ems. This will reduce your duplication considerably. For instance...
body { font-size: 12px };
.wrapper { width: 800px; }
Now you have a base to which everything else can refer. So I could do stuff like this:
h1 { font-size: 2em; }
.content { font-size: 1.2em; }
.sidebar { font-size: 1em; }
.content { width: 70%; }
.sidebar { width: 30%; }
If you decide 800px is old hat, you can change your one width to 900px, and everything will still work.
It totaly depends on the situation. If I have to create a template for an existing page that is using CSS, often generated by an editor or something, I would use that as a starting point and change bits and pieces until it does what I want. This would go for wordpress and that kind of apps too.
When I do not have a css to start with I work from the to 'Body' and work my way down to the children of the children of the children etc. From big to small.
I like to use a tool that shows a visual representation of the css tag I'm editing so I can see what it looks like. I like Expression Web because it can navigate to styles very easy and shows me what it looks like.
You said in your comment to this reply that you want to be able to tweak it easily?
I highly recommend some of the firefox extensions for this purpose. Firebug is fantastic for quickly seeing the css behind something or for tweaking css. If you hover over something in firebug it will display the css, and let you turn off individual lines of css and see how the browser renders it.