This article is for all enthusiasts working in the field of web development. New comers provided that you know basics of HTML & CSS to understand this article. Working in Web site Development projects, managing your stylesheets can help you in the long run. As any projects moves ahead, Its hard to remember everything. So lets start to understand how you can make your life easier by managing you css file. At CSSAGlobal we strictly follow this. Now first of all it is more important to think of all the inner pages, layouts, reusable factors while generating HTML (at least home page) & main CSS file out of your Photoshop or any other template file. This kind of attitude lacks in new comers. They might think of that individual page only & create CSS accordingly & may not able to do optimize the code. So understanding basic things like difference between a static website & a dynamic one might help us. Now see the following categorization. You might not understand what exactly this is unless you completely read the article.
- Global declarations = GENERIC
- H1 TO H6 styling = HEAD
- Changeable content = CONTENT
- Navigations / listings = NAVS
- Modules = ARTICLE
- Plain bg colors = BGS
- Gradients = GRADS
- Borders = BORDERS
- Visual containers = ROUNDS
- Text, fonts, = TEXTALL
- Form, input = INPUT
- Footer = FOOTER
- Miscellaneous = MISC
Categorize your css into few sections like above. This comment will appear on top of your css file. After this comment you can start writing for your css file.
First of all, you may need to declare some global settings or declarations in order to set a look & feel throughout all the pages of a website. Eg. Font, text colors, Link colors, Line heights for paragraphs. So this section will have a name “GENERIC”.
/* BODY, FONT AND COLOR, GLOBAL (id=GENERIC)
**********************************************************/
body {font:normal 11px Arial; color:#000000; text-align:left; background:url(../images/bigger-project-holder.jpg) top no-repeat center;}
body,form,h1,h2,h3,h4,h5,h6,p {padding:0; margin:0;}
& so on all the global declarations.
Then you ma start with main container div & header div styling
/* BODY WRAPPER / HEADER / TOP MENU (id=HEAD)
**********************************************************/
#mainWrapper {margin:0 auto; width:960px;}
#header {width:100%; padding-top:10px;}
& so on for others…
like wise for each section you can denote an ID, place it to the end of the small description.
Like wise I have categorized it for h1 to h6 elements, borders, form tags, visual containers for example rounded corner expandable tables, gradient backgrounds, plain backgrounds & then modules like Calenders, Latest update news where you need to write css for that individual module.
Now we all know a designer creates main css file & fewer html pages. But some times according to programming requirements, you need to tweak this css a little. After a long span of time you may now remember which class or an id you have written for one particular purpose. Here the top commented declaration helps you to go to exact number line, because you have already categorized your css.
Check out some examples..
/* ALL TEXT CSS (id=TEXTAll)
**********************************************************/
/* font SIZES */
.vsmlTxt {font-size:10px;}
.smlTxt {font-size:11px;}
.para {font-size:12px;}
/* ALL INPUT & FORM CLASSES (id=INPUT)
**********************************************************/
.input {background:url(../images/input.gif) repeat-x top; border:1px solid #666666; padding:3px;}
Let me know if you like this kind of approach or not..!
Some of the website examples done using same strategy
http://www.cssaglobal.com/demos/html/newenglandvibe/
http://www.cssaglobal.com/demos/html/redandsilver/
http://www.cssaglobal.com/demos/html/schlagmich/
Some live websites aswww.drivelocker.com/
www.favorask.com/
www.boondogglen.com
www.hiremycoder.com/
www.idcs.usa.org
www.styledout.com
www.suturemd.com
